如何使 div 调整包含内容的高度？

Question

我有一个“maincontent” div，其中包含我的内容。里面有一些 javascript (Fancybox) 来显示图像。我试图让 div 的高度自动更改以伴随其中的任何内容，以便 div 本身不会滚动，但整个网页会滚动。

这是我要修复的页面：http://willryan.us/content/photo.html

我试过弄乱最小高度、高度：自动、溢出：自动等，但没有结果。 Height:auto 认为文本是 div 中唯一的内容，就像它完全忽略 javascript 图像一样。

这是我现在的 CSS：

div#content {
overflow:auto;
width:958px;
height: 800px;
position:absolute;
top:50px;
left:0px;
background-color:#C0CACE;

border:1px solid;
border-color:#616161;

-webkit-box-shadow:  0px 0px 50px 0px rgba(0, 0, 0, 1);
box-shadow:  0px 0px 50px 0px rgba(0, 0, 0, 1);
z-index:1;

}

Answer 1

问题与photobox div有关，如果您关闭绝对位置，它会工作到它的高度，关闭高度并且它适合。

如果在不需要的时候不使用绝对定位，这个问题是可以避免的。

您应该使用相对定位来重建您的页面。考虑到您只需要将 text-align:center; 使用的 div 放在他们的父母身上，这应该很容易。

Answer 2

您的问题在于使用绝对定位。对常规文档流使用静态定位（默认），不会有这个问题。

更新

你也不使用相对定位。

常规文档流（未明确指定）是position: static;，您使用绝对。绝对定位基本上将元素从文档的常规流中取出，并根据它最近的相对定位的父元素放置它。

你应该做什么... 如果您需要将包装器放置在“中心”。使用margin: 0px auto; 将“包装器”设置为positon:relative，并从所有内部元素中删除绝对位置。如果您需要缩进包装器内的元素，请使用填充/边距。

Answer 3

我建议您使用position: relative，不要在您的主要内容子项中使用position:absolute。这里不需要绝对的。

1. 删除#content 高度（或使用最小高度）
2. 删除#photobox 高度（或使用最小高度）
3. 删除#content溢出
4. 将所有#content 子位置设置为相对位置（必要时使用边距）

.

div#header {
   background-image:url(content/assets/elements/header.png);backround-repeat:none;
   width:960px;
   height:50px;
   z-index:2;
   -webkit-border-radius: 10px 10px 0px 0px;
   border-radius: 10px 10px 0px 0px;
   -webkit-box-shadow:  0px 0px 30px 0px rgba(0, 0, 0, 1);
   box-shadow:  0px 0px 30px 0px rgba(0, 0, 0, 1);
}

div#footer {
   background-image:url(content/assets/elements/footer.png);
   backround-repeat:none;
   width:960px;
   height:50px;
   z-index:2;
   -webkit-border-radius: 0px 0px 10px 10px;
   border-radius: 0px 0px 10px 10px;
   -webkit-box-shadow:  0px 0px 30px 0px rgba(0, 0, 0, 1);
   box-shadow:  0px 0px 30px 0px rgba(0, 0, 0, 1);
}

div#content {
   width:958px;
   background-color:#C0CACE;
   border:1px solid;
   border-color:#616161;
   -webkit-box-shadow:  0px 0px 50px 0px rgba(0, 0, 0, 1);
   box-shadow:  0px 0px 50px 0px rgba(0, 0, 0, 1);
   z-index:1;
   overflow: visible;
}

div#photobox {
   width: 769px;
   margin-left: 95.5px;
}