如何使HTML div占据可用高度的其余部分
如何使HTML div占据可用高度的其余部分
提问于 2022-02-01 12:54:48
我正在做一个web应用程序，在那里我希望内容填充整个屏幕的高度。如何使div (other-child)在不计算其高度的情况下自动填充其父节点。
html {
height:100%;
}
body{
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
}
#parent {
height:100%;
}
#child {
height:50px;
background:yellow;
}
#other-child{
background:red;
/* height: 100% */
}<html>
<body>
<div id="parent">
<div id="child" >fixed height</div>
<div id="other-child">occupy the rest</div>
</div>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-02-01 13:01:37
您可以在#parent上使用css网格并从那里控制一切，它将非常简单：
html {
height:100%;
}
body{
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
}
#parent {
min-height: 100vh;
display:grid;
grid-template-rows: 50px 1fr
}
#child {
background:yellow;
}
#other-child{
background:red;
}<html>
<body>
<div id="parent">
<div id="child" >fixed height</div>
<div id="other-child">occupy the rest</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2022-02-01 12:59:58
请签出此解决方案，家长将为display:flex，将增长的子程序可以使用flex-grow: 1完成。
html {
height:100%;
}
body{
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
}
#parent {
height:100%;
width:100%;
display: flex;
flex-grow: 1;
flex-direction: column;
}
#child {
height:50px;
background:yellow;
}
#other-child{
background:red;
flex-grow: 1;
/* height: 100% */
}<html>
<body>
<div id="parent">
<div id="child" >fixed height</div>
<div id="other-child">occupy the rest</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70940935
复制相关文章
相似问题
腾讯云开发者
