gpt4 book ai didi

html - 外层 div 不随内层 div 展开

转载 作者:行者123 更新时间:2023-11-28 07:16:54 25 4
gpt4 key购买 nike

我有一组使用如下 HTML 模板的 HTML 网页,每个 HTML 页面都有不同数量的内容。所有 HTML 页面都使用相同的 CSS 文件,该文件也在下面给出。

正如我所说,每个页面的内容都不同,我希望外部 div (#main) 根据内容 (#content) 自动调整大小.

HTML:

<html>
<body>
<div id="main">
<div id="content">
Content goes here
</div>
<div id="footer">
Created by Cleopatra Masy © August, 2015<br>
</div>
</div>
</body>
</html>

CSS:

body {
background:url('/images/bg.jpg') no-repeat center center fixed;
background-size:cover;
width:100%;
height:100%;
margin:0;
}

#main {
box-shadow:6px 0 15px -4px rgba(31,73,125,0.8), -6px 0 8px -4px rgba(31,73,125,0.8);
position:relative;
height:1000px;
width:980px;
margin:0 auto;
}

#content {
font-weight: normal;
min-height:655px;
margin-right:20px;
margin-left:220px;
width:740px;
position:absolute;
margin-top:105px;
}

#footer {
background:url('/images/footer-back.png') repeat-x left top;
font-size:17px;
color:#FFF;
position:absolute;
text-align:center;
width:980px;
line-height:30px;
vertical-align:middle;
bottom:0;
}

我已经尝试了以下似乎没有用的......

尝试 1

我将 #main 的最小高度设置为 1000px 但这没有做任何事情。

尝试 2

我将 #main 的高度设置为 100%,但这会导致框阴影和页脚消失。

注意:我也尝试过查看以前的问题,但似乎没有一个对我有用。在大多数情况下,框阴影和页脚会消失。

另请注意,这是一个新问题,我需要认真的帮助。

任何帮助将不胜感激。

谢谢,埃及艳后梅西

最佳答案

如果设置了固定的高度或宽度,容器将不会展开。只需将该高度更改为最小高度,您就可以保留框阴影。

#main {
box-shadow:6px 0 15px -4px rgba(31,73,125,0.8), -6px 0 8px -4pxrgba(31,73,125,0.8);
width:980px;
margin: 10px auto;
min-height: 500px;
position: relative;
}

#content {
font-weight: normal;
margin-right:20px;
margin-left:220px;
width:740px;
margin-top:55px;
}

请看这个例子:http://jsfiddle.net/ahbfmvbx/1/

关于html - 外层 div 不随内层 div 展开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32301462/

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