Question

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

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

我已经尝试搞乱最小高度，高度：自动，溢出：自动等，没有结果。高度：自动表现为文本是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

你的问题在于使用绝对定位。对常规文档流使用静态定位（默认），您将不会遇到此问题。

<强>更新

您也不使用相对定位。

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

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

Answer 2

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

如果您在不需要时不使用绝对定位，则可以避免此问题。

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

Answer 3

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

移除#content高度（或使用最小高度）
移除#photobox高度（或使用最小高度）
删除#content溢出
将所有#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;
}

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

3 个答案: