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

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

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

UPDATE

你也不使用相对定位。

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

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

Answer 2

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

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

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

Answer 3

我会建议你 使用 position: relative 不要在你的maincontent孩子中使用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; 
}