gpt4 book ai didi

html - 最后一个 div 填充剩余高度

转载 作者:太空宇宙 更新时间:2023-11-04 12:12:07 24 4
gpt4 key购买 nike

我想在我的 body 中制作最后一个 div 来填充剩余空间,但我遇到了一些麻烦。我有这个 HTML:

<body>
<div class="content"></div>
<div class="footer"></div>
</body>

和这个 CSS:

body, html {
height: 100%;
}

.content {
height: 100px;
background-color: red;
}

.footer {
height: 100%;
background-color: #ccc;
}

这是一个JSFiddle .

它不起作用,因为出现了垂直滚动条。

知道我该怎么做吗?

最佳答案

你可以让它成为一个计算:

.footer {
height: calc(100% - 100px);
}

此外,添加此样式:

body,html {
margin: 0px;
}

Working Fiddle #1


如果 content 的高度未知,可以使用 flexbox 解决方案:

body, html {
height: 100%;
width: 100%;
margin: 0px;
display: flex;
flex-direction: column;
}

.footer {
flex: 1;
}

Working Fiddle #2

关于html - 最后一个 div 填充剩余高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28975187/

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