gpt4 book ai didi

html - css div 100% 高度问题

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

所以我有一个这样的html结构

html,
body {
height: 100%;
margin: 0;
padding: 0;
}

#container {
height: 100%;
min-width: 900px;
min-height: 650px;
background: #dddbd9 url('../images/bg.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
}

#content {
clear: both;
height: 345px;
position: relative;
margin: 0 auto;
width: 790px;
padding: 20px;
overflow: hidden;
}

#bottomBar {
height: 100%;
margin: 0 auto;
width: 100%;
padding: 0px;
background: #ffffff url('../images/bottomBG.jpg') 0 0 repeat-x;
}
<body>
<div id="container">
<div id="content"></div>
<div id="bottomBar"></div>
</div>
</body>

为什么 #bottomBar 高度一直延伸超过几百像素,而 bg 图像只有大约 115 像素?

更新:实际上我不希望 bottomBar 只是 115。我希望它占据底部的整个剩余区域,但不要超过窗口。谢谢。

UPDATE2:#content 是 345px,#container 是 100%,实际上在 content 和 bottomBar 之间还有一些其他的 div , 如何获得 #bottomBar 的剩余高度?我想让 bottomBar 只占据剩余区域。

最佳答案

只需明确设置 div 高度,例如 height:115px,或者编写一个服务器端脚本来返回图像的高度,如果值得的话。正如其他人所提到的,将高度(或宽度)设置为 X% 意味着容器的 X%,而不是背景图像的 X%。

关于html - css div 100% 高度问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7421888/

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