gpt4 book ai didi

css - 如何防止子 div 超出父 div 的高度?

转载 作者:太空宇宙 更新时间:2023-11-04 13:22:06 27 4
gpt4 key购买 nike

在我正在布局的页面上,有一堆 div 相互塞入。 HTML 代码看起来像这样:

<div id="overlay">
<div id="main_section">
<div class="left">yadda yadda left sidebar</div>
<div class="middle">
<div id="header">yadda yadda header</div>
<div id="main_content"><img class="resize content" src="static/some_image.jpg" /></div>
</div>
<div class="right">yadda yadda right sidebar</div>
<div class="clear"></div>
</div>
</div>

主容器是overlay,使用固定位置,像这样:

#overlay {
position: fixed;
width: 100%; height: 90%;
top: 0px; left: 0px;
background-color: rgba(255,255,255,0.5);
}

(我用不同级别的不透明度将多个背景分层,这就是为什么有 main_section、overlay 等)

现在,所有的 child 都使用相对定位,效果相当不错。问题出现在#main_content 中。 #main_section 和 .middle 都有 height: 100%,正如预期的那样,它们一直向下到 #overlay 的底部。现在,这里是#main_content:

#main_content {
position: relative;
height: 100%;
width: 70%;
overflow-y: auto;
text-align: right;
}

这并没有像我想要的那样工作,因为由于图像大小的原因,这个东西一直延伸到页面底部,而不是延伸到#overlay 的底部。我已经尝试过 overflow-y: scroll 和 height: inherit,我已经尝试过 max-height: 100%,我正在扯掉我的头发。 Stackoverflow 是我心脏病发作前的最后希望!

最佳答案

我更改并添加了一些属性,因为没有提供完整的源代码(颜色仅用于识别相关 block )。在我看来,错误一定出在您的 CSS 中的其他地方,因为下面的代码对我来说工作正常。

<!DOCTYPE html>
<html>
<head>
<style>
#overlay {
position: fixed;
width: 100%;
height: 90%;
top: 0px;
left: 0px;
background-color: blue;
border: 2px solid green;
}
#main_section {
width: 100%;
height: 100%;
background: yellow;
}
.middle {
height: 100%;
width: 100%;
background: lavender;
position: relative;
}
#main_content {
position: relative;
height: 100%;
width: 70%;
text-align: right;
overflow-y: auto;
background-color: red;
}
img {
width: 700px;
height: 2000px;
background-color: white;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="overlay">
<div id="main_section">
<div class="left"></div>
<div class="middle">
<div id="header"></div>
<div id="main_content"><img class="resize content" src="static/some_image.jpg" /></div>
</div>
<div class="right"></div>
<div class="clear"></div>
</div>

我遇到和你一样的问题的唯一一次是当我设置这些 #main_content {position:fixed;}.middle {position:fixed;}。您确定 #main_content.middle 没有继承固定位置吗?或者可能是一个未被注意的类添加了该属性?

关于css - 如何防止子 div 超出父 div 的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15511254/

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