Bho*_*yar 77 html css height fill
+--------------------+
| |
| |
| |
| |
| 1 |
| |
| |
| |
| |
+--------------------+
| |
| |
| |
| |
| 2 |
| |
| |
| |
| |
+--------------------+
如上所示的(1)的内容是未知的,因为它可以在动态生成的页面中增加或减少.如上所示的第二个div(2)应填充剩余空间.
这是我的HTML的一个例子
<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>
三网融合
#full{width: 300px; background-color: red;}
#someid{height: 100%;}
或者这种方法错了吗？我该怎么做？请看我的演示并告诉我我的错误.
thg*_*ell 61
如果你添加一个div(#header下面)来包装你的内容1,你应该能够这样做.
如果浮动#header,内容#someid将被强制绕过它.
接下来,将#header宽度设置为100%.这将使其扩展以填充包含div的宽度#full.这将有效地推动下面的所有#someid内容,#header因为没有空间可以绕过两侧了.
最后,将#someid高度设置为100%,这将使其与高度相同#full.
HTML
<div id="full">
<div id="header">Contents of 1</div>
<div id="someid">Contents of 2</div>
</div>
CSS
html, body, #full, #someid {
height: 100%;
}
#header {
float: left;
width: 100%;
}
更新
我认为值得一提的是,今天的现代浏览器都支持flexbox.CSS可以被改变#full成为一个flex容器,并且#someid应该将它的flex设置为大于的值0.
html, body, #full {
height: 100%;
}
#full {
display: flex;
flex-direction: column;
}
#someid {
flex-grow: 1;
}
Ser*_*lis 10
要div在页面上获得100%的高度,您需要将div上方的层次结构上的每个对象设置为100%.例如:
html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }
虽然我无法完全理解你的问题,但我认为这就是你的意思.
这是我工作的例子:
<html style="height:100%">
<body style="height:100%">
<div style="height:100%; width: 300px;">
<div style="height:100%; background:blue;">
</div>
</div>
</body>
</html>
Style 只是我没有外化的CSS的替代品.
这可以通过表格来完成:
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr height="0%"><td>
<div id="full">
<!--contents of 1 -->
</div>
</td></tr>
<tr><td>
<div id="someid">
<!--contents of 2 -->
</div>
</td></tr>
</table>
然后应用css使someid填充剩余的空间:
#someid {
height: 100%;
}
现在,我可以听到人群中愤怒的叫喊声,"哦,不,他正在使用桌子!把他喂给狮子!" 请听我说
与接受的答案不同,除了使容器划分页面的整个高度之外什么也没有做完,这个解决方案使div#2按照问题中的要求填充剩余的空间.如果您需要第二个div来填充分配给它的全部高度,这是目前唯一的方法.
但是当然可以随意证明我的错!CSS总是更好.
html,
body {
height: 100%;
}
.parent {
display: flex;
flex-flow:column;
height: 100%;
background: white;
}
.child-top {
flex: 0 1 auto;
background: pink;
}
.child-bottom {
flex: 1 1 auto;
background: green;
} <div class="parent">
<div class="child-top">
This child has just a bit of content
</div>
<div class="child-bottom">
And this one fills the rest
</div>
</div>