gpt4 book ai didi

html - 调整内容大小以适应高度 CSS 溢出?

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

如果 height: 100%; 拉伸(stretch)一个元素以适应其父元素的高度,我觉得很疯狂,为什么它会溢出?我正在多个浏览器中进行测试,它们都显示出相同的问题。

我有这个结构

html
>body
>>container
>>>header
>>>content
>>>footer

我想要的是拉伸(stretch)内容高度以便容器适合浏览器窗口

我尝试了很多不同的方法,将 html 和 body 高度设置为 100%,将绝对值和顶部和底部设置为零……但没有任何效果,每当我拉伸(stretch)内容时,页脚就会跳出容器

举个例子:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
#container
{
height: 100%;
}
#content
{
min-height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
1
</div>
<div id="content">
2
</div>
<div id="footer">
3
</div>
</div>

</body>
</html>

这是怎么回事,为什么会熄灭?

最佳答案

也许这可以解决您的问题。里面的div需要加起来100%

body{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

#container
{
height: 100%;
}
#header{
height: 20%; /*random number but all three should add up to 100%*/
}
#content
{
min-height: 70%; /*random number*/
}

#footer{
height:10%; /*random number*/
}

关于html - 调整内容大小以适应高度 CSS 溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11780595/

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