gpt4 book ai didi

html - 为什么下面的 html+css 会创建一个超出屏幕底部的 div?

转载 作者:太空宇宙 更新时间:2023-11-04 15:54:52 26 4
gpt4 key购买 nike

我已经尝试创建一个 jsFiddle,但无法重现我的问题。问题是,当我在 webkit(XP 上的 Chrome 或 iOS 上的 Safari)中打开以下页面时,第 3 个(蓝色)div 不在页面底部,而我想要的是它位于底部。

我知道我应用了一些不必要的样式;那是因为我已从需要设置这些属性的页面中尽可能地简化它,并且删除会阻止问题重现。

页面代码为:

<html>
<head>
<style type="text/css">
body {
margin: 0;
}
.A {
background: red;
float: left;
-webkit-transform-style: preserve-3d;
}
.B {
background: green;
height: 100%;
}
.C {
background: blue;
position: fixed;
bottom: 0px;
}
</style>
</head>
<body>
<div class="A">
1
<div class="B">
2
</div>
<div class="C">
3
</div>
</div>
</body>
</html>

最佳答案

height: 100%.B 移动到 .A

问题是您的包含元素 (div A) 没有定义高度,因此会自动调整大小以适应它的内容。 div B 嵌套在其中并定义了 100% 的高度,因此 div A 将为 100% + div C,导致 div C 超出屏幕底部。

关于html - 为什么下面的 html+css 会创建一个超出屏幕底部的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10652894/

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