父母不会扩大到孩子的身高

Question

正如您将看到的,我有一个div(#innerPageWrapper)包含包含内容的div.#innerPageWrapper也可以在视觉上作为布局中的半透明边框.

我的问题是#innerPageWrapper不会扩展以适应内部的孩子,更不用说扩展以填充页面的其余部分.

这是代码 #innerPageWrapper

#innerPageWrapper {
    width: 1100px;
    height: 100%;
    display: inline-block;
    padding: 0 50px 0 50px;
    background: rgba(0, 0, 0, 0.75) url(navShadow.png) repeat-x top;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

我尝试过很多东西(包括使用calc()来获得div高度).我想避免使用jQuery.

Answer 1

首先,您正在使用height:100%;哪种情况是错误的.有关不使用原因的说明height:100%,请查看此文章;

要了解原因,您需要了解浏览器如何解释高度和宽度.Web浏览器根据浏览器窗口的打开宽度计算总可用宽度.如果你没有设置你的文件有任何宽度值,浏览器会自动流向的内容,以填补窗口的整个宽度.

但高度的计算方式不同.实际上,浏览器根本不评估高度,除非内容太长以至于它超出视口(因此需要滚动条)或者网页设计者在页面上的元素上设置绝对高度.否则,浏览器只是让内容在视口的宽度内流动,直到它结束.根本不计算高度.当您在父元素没有设置高度的元素上设置百分比高度时,会出现问题.换句话说,父元素具有默认高度:auto;.实际上,您要求浏览器根据未定义的值计算高度.由于这将等于空值,结果是浏览器什么都不做.

其次,要使外部div(在本例中为#innerPageWrapper)环绕子元素,您应该overflow:hidden在此包装器上使用.

对于这个能够成功,你的子元素必须不能 是position:absolute因为你有#contentMain和#contentSidebar,反而让这些浮动(浮动:左和浮动:右)和后#contentSidebar DIV关闭,增加<div style="clear:both"></div>清除浮动,允许父母完美地包裹着他们.

我已将所需的CSS放入此 Pastebin中,请注意您必须使用div清除浮动,如上所述.

Answer 2

尝试将父元素的宽度和高度设置为auto.简化示例:

http://jsfiddle.net/kimgysen/8nWDE/

#innerPageWrapper {
    width:auto;
    height:auto;
    background:red;
}

#innerPageWrapper p{
    width: 100px;
    height: auto;
    margin: 10px auto;
    background: yellow;
}

编辑:

检查这个小提琴是否有更高级的例子,包括水平和垂直中心:http://jsfiddle.net/kimgysen/8nWDE/1/

父元素将动态地适应子元素的边界.
您还可以在子元素上设置动态宽度和高度.

.outerDiv{
    display: table-cell;
    background-color: yellow;
    width: auto; 
    height: auto;
    vertical-align: middle;
    text-align: center;
}

.innerDiv{
    display: inline-block;
    background-color: red; 
    width: 100px;
    height: 100px;
    margin: 20px;
}