0

我有一个“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;

}

4

3 回答 3

0

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

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

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

于 2012-07-20T15:53:46.310 回答
0

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

更新

您也不使用相对定位。

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

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

于 2012-07-20T15:50:20.177 回答
0

我建议你不要在你的 maincontent 孩子中使用。position: relativeposition: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;
}
于 2012-07-20T15:55:15.530 回答