Html 如何在基本布局中设置div的高度_Html_Css

Html 如何在基本布局中设置div的高度

html css

Html 如何在基本布局中设置div的高度,html,css,Html,Css,我试图设置2个div的大小，以70-30%的比率填充页面如果不设置“html，body”的大小，如何才能使div显示到正确的高度当前，它显示文本高度的两行。谢谢 <!DOCTYPE html> <html> <head> <title>Title</title> </head> <body> <div style="overflow: hidden; clear: both;"> <

我试图设置2个div的大小，以70-30%的比率填充页面

如果不设置“html，body”的大小，如何才能使div显示到正确的高度

当前，它显示文本高度的两行。谢谢

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>

<body>
<div style="overflow: hidden; clear: both;">
    <div style="background-color: blue; height: 70%;">Top</div>
    <div style="background-color: red; height: 30%;">bottom</div>
</div>
</body>

</html>


标题
顶部
底部

不幸的是，您需要为DIVs父级指定一个固定的高度，以使70%-30%的比率正常工作

您可以做的一件事是使用JavaScript获取窗口的高度，然后将此值分配给父DIV。通过这种方式，百分比将起作用，因为它有一个如何调整大小的参考。

您不能使用CSS进行此操作，这是有充分理由的。如果你不给身体设置一个高度，它的高度将达到容纳所有孩子所需的高度。现在，如果对孩子的身高使用基于百分比的单位，则孩子的身高将基于其父身高计算

因此，父对象的高度将取决于其子对象的高度，而子对象的高度将取决于父对象-infinte循环的高度

p.S.Fred的方法是有效的，以防您对设置高度的关注围绕设置静态高度。将height设置为100%可能会解决您的难题。

您需要将body和html元素的height设置为100%，并将外部div的height设置为100%

CSS:

body，html{height:100%}
顶部
...

您可以将

位置：绝对

添加到父

div

中，然后将其拉伸以达到全宽和全高。请注意，

width:100%

声明对于强制执行块级格式化上下文非常重要

<div style="position:absolute; overflow: hidden; top:0; left:0; right: 0; bottom: 0;">
  <div style="background-color: blue; height: 70%; width: 100%;">Top</div>
  <div style="background-color: red; height: 30%; width: 100%;">bottom</div>
</div>


顶部
底部

这是我的建议

请注意，这将从“正常流”中删除此div，并且同级元素将被遮挡/遮挡。政府提供以下建议：

…绝对定位元素的内容不会在任何其他框中流动。它们可能会遮挡另一个框的内容（或自身被遮挡），具体取决于重叠框的堆栈级别

如果您不能设置html正文高度，那么唯一的替代方法就是使用javascript。它们以正确的高度显示-XX%0=0。为什么不设置html正文的大小？这将使你的问题得到解决，

很清楚：两者都有不会为您做任何事情，除非它的子项是浮动的，并且在这里使用，溢出：隐藏也不会为您做任何事情。
<div style="position:absolute; overflow: hidden; top:0; left:0; right: 0; bottom: 0;">
  <div style="background-color: blue; height: 70%; width: 100%;">Top</div>
  <div style="background-color: red; height: 30%; width: 100%;">bottom</div>
</div>