gpt4 book ai didi

css-only 100% div height with dynamic height footer

转载 作者:行者123 更新时间:2023-11-28 13:11:45 30 4
gpt4 key购买 nike

我有一个三部分布局:页眉、内容和页脚。我非常熟悉绝对定位技术;当我希望内容 div 扩展到可用高度的 100% 时,我经常使用它。

在这种情况下,我的问题是我事先不知道页脚的高度,它是根据自己的内容动态调整的,行数未知(通常在 1 到 3 行之间)。< br/>我希望主要内容 div 占可用高度的 100%,在考虑到页眉的高度(这是固定的,所以很容易)和页脚的高度之后,我不能使用绝对定位技术在这里。

我有一个涉及 javascript 的解决方案,但我正试图找到一个纯 css 的解决方案。理想情况下,它应该是一个跨浏览器的解决方案(IE8、IE9、chrome、firefox 和 Safari)。

最佳答案

试试这个

<!doctype html>
<html>
<body>
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;

}
#footer {
position:absolute;
bottom:0;
width:100%;

background:#6cf;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
</body>
</html>

关于css-only 100% div height with dynamic height footer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15449919/

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