gpt4 book ai didi

css - 仅使用 CSS 填充剩余的 div-height

转载 作者:技术小花猫 更新时间:2023-10-29 10:59:44 26 4
gpt4 key购买 nike

我在一个容器中有两个 div:s。
第一个 div 应该有自动高度,占用任何需要的空间。
第二个 div 应具有容器的剩余高度。

我希望不使用 Javascript 来做到这一点。

没有任何纯 CSS 的解决方案吗?也许利用 display:table/display:table-celldisplay:flex

非工作示例

<!DOCTYPE html>
<html>
<head>
<title>Stretch</title>
<style type="text/css">
html { height: 100%; }
body {
padding: 0 0;
margin: 0 0;
height: 100%;
background: grey;
}
#container { background: pink; }
#autoHeight { background: blue; }
#remainingHeight { background: green; }
</style>
</head>

<body>
<div id="container">
<div id="autoHeight">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</div>

<div id="remainingHeight">This div should fill out the rest, making the display
mainly green. And no, I don't mean to just have green background. It will
contain other things.</div>
</div>
</body>
</html>

最佳答案

我可以使用 display:tabledisplay:table-row 实现这一点(不适用于 IE7 或更早版本)。

http://cssdeck.com/labs/elars8pj

html { height: 100%; }
body {
padding:0 0;
margin:0 0;
height: 100%;
background:grey;
}
#container {
display:table;
height:100%;
width:100%;
background:pink;
}
#autoHeight {
display:table-row;
background:blue;
}
#remainingHeight {
display:table-row;
height:100%;
background:green;
}

关于css - 仅使用 CSS 填充剩余的 div-height,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17148624/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com