Question

我有一组使用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％，但这会导致框阴影和页脚消失。

注意：我也曾尝试查看以前的问题，但似乎没有一个问题适合我。在大多数情况下，框阴影和页脚会消失。

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

任何帮助都将不胜感激。

谢谢， Cleopatra Masy

Answer 1

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

#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/

Answer 2

问题是#content绝对定位。因此它不会占用任何空间。

您已包含的代码表明应该保存以完全删除#content的位置属性。只需确保设置min-height #main而不是height，以便元素可以实际增长。
为避免内容和页脚重叠，您还应在#main的底部添加填充。

＆＃13;

var lines = 0;
var content = document.getElementById('content');
content.addEventListener('click', function() {
  lines++;
  content.innerHTML += '<br>Line ' + lines;
});

＆＃13;

#main {
  background-color: red;
  position: relative;
  min-height: 100px;
  padding-bottom: 30px;
}

#content {
  background-color: green;
}

#footer {
  background-color: blue;
  line-height: 30px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

＆＃13;

<div id="main">
  <div id="content">
    Click to add line.
  </div>
  <div id="footer">
    &copy; 2015 ...
  </div>
</div>

＆＃13;

Answer 3

我认为这是你正在寻找的东西。这是http://jsfiddle.net/u1L9nz6o/：

#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;
  text-align: center;
}

#content {
  position: relative;
  font-weight: normal;
  min-height:655px;
  display: inline-block;
  margin: 0 auto;
  text-align: left;
}

外部div不会随内部div

3 个答案: