Question

我正在创建一个网站，我在包装器左侧有一个信息部分。包装器高度设置为100％，我的左侧信息设置为100％，但高度不是100％，它是自动的，我怎么能这样做，所以我的左div高度等于我的包装div高度？

CSS：

#wrapper {
    background:url(../images/wrap_bg.png);
    width: 1240px;
    min-height:100%;
    overflow: hidden;
    margin-left:auto;
    margin-right:auto;
}
#wrapper #left {
    width:295px;
    height:100%;
    min-height:100%; 
    border-right: 1px dotted #fefbfb; 
    padding: 0 0 0 10px;
    float: left;
}

HTML：

<div id="wrapper">
    <div id="left">some text</div>
</div>

这有点像我http://jsfiddle.net/xD96D/

Answer 1

min-height的百分比值相对于包含框的高度而#wrapper元素（容器）没有明确的height值。

因此，左100%的{{1}}属性的min-height值计算为div。

来自MDN

0

百分比是根据高度来计算的   生成的框包含块。如果含有的高度   未明确指定块（即，它取决于内容   高度），这个元素并不是绝对定位的百分比   值被视为0。

您应该使用min-height让父母height: 100%为孩子们工作。

<强> WORKING DEMO

Answer 2

如果父级的高度也设置为100％，则只能将高度设置为100％，设置为静态值，如100像素。

看看Hashem Qolami的回答。他做了一个更好的工作来解释这个问题，并发布了一个例子。

div高度不是父母身高的100％

2 个答案: