如何填满剩余高度的100%？
如何填满剩余高度的100%？
提问于 2013-03-13 11:30:31
+--------------------+
| |
| |
| |
| |
| 1 |
| |
| |
| |
| |
+--------------------+
| |
| |
| |
| |
| 2 |
| |
| |
| |
| |
+--------------------+上面显示的(1)的内容是未知的，因为它可能在动态生成的页面中增加或减少。如上所述，第二个div (2)应该会填充剩余的空间。
下面是我的html的一个例子
<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>css...
#full{width: 300px; background-color: red;}
#someid{height: 100%;}或者这种方法是错误的？我该怎么做呢？请看我的，看看我的错误。
回答 8
Stack Overflow用户
回答已采纳
发布于 2013-03-13 12:37:00
如果你添加一个div (下面的#header)来包装你的内容1，你应该能够做到这一点。
- 如果浮动
#header，则#someid中的内容将被强制围绕它流动。 - 接下来，您将
#header的宽度设置为100%。这将使其展开以填充包含的div#full的宽度。这将有效地将#someid的所有内容推到D10以下。由于没有空间围绕边流动，因此将D13的高度设置为100%，这将使其高度与div相同
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在当今的浏览器中得到了很好的支持。如果#full变成了flex容器，那么CSS可能会被改变，并且#someid应该将它的flex grow设置为大于0的值。
html, body, #full {
height: 100%;
}
#full {
display: flex;
flex-direction: column;
}
#someid {
flex-grow: 1;
}Stack Overflow用户
发布于 2013-03-13 11:48:23
要在页面上将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的替代品，我还没有外化它。
Stack Overflow用户
发布于 2016-02-15 20:32:42
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15376558
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号