gpt4 book ai didi

css - Firefox,不会自动调整容器高度 : 100%, 底部边距丢失!

转载 作者:行者123 更新时间:2023-11-27 22:30:24 25 4
gpt4 key购买 nike

我有一个容器,里面有 4 个 div。我的容器被拉伸(stretch)以填满整个窗口。在 IE 中,如果您调整窗口大小,所有内容都会正确调整大小,并且容器周围的所有 4 个边距都可见。我试图在 FF 中获得相同的行为,但我似乎无法找到正确的 CSS 配方。

请注意,如果您通过 HTML 和 CSS 代码检查 IE 中的行为,我会尝试在 FF 中实现相同的行为。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>IE AutoResize</title>


<style type="text/css" media="screen">

html {
height:100%;
width:100%;
overflow: hidden;
margin-bottom:40px;
}

body {
height:100%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}

#container{
background-color:#808080;
height: 100%;
Valignment-adjust: central;
padding: 10px 10px 10px 10px;
}

#top {
background-color:#00FF80;
height: 10%;
}

#left {
background-color:#FF8000;
float:left;
width: 20%;
height:80%;
}

#right {
background-color:#3944C6;
width: 80%;
height:80%;
float:right;
}

#bottom {
clear:both;
background-color:#FF0000;
height: 10%;
}
</style>



</head>
<body>

<div id="container">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>

</body>
</html>

最佳答案

这恐怕又是IE搞错了,FF搞对了。你不能有 100% 的高度,然后有额外的边距或填充顶部或底部,你需要找到另一种方法。如果您可以发布您的 html 或链接,我们可能会提供进一步的指导。

关于css - Firefox,不会自动调整容器高度 : 100%, 底部边距丢失!,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3910588/

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