Question

当我在下面的div中指定一个百分比高度时，它为什么会出来？提前谢谢你。

HTML：

<div id="div1">
    Test<br/>Test<br/>Test<br/>Test<br/>
    <div id="div2">Test</div>
</div>

CSS：

body{
    margin: 0     
}

#div1{
    position: absolute;
    width: 200px;
    height:100%;
    right: 0;
    background-color: #467
}

#div2{
    width: 50%;
    height: 99%;
    background-color: black;
    color: white
}

Answer 1

因为你缺少溢出属性而退出。将它设置为隐藏在＃div2 ok？

上

Answer 2

好的问题。 Test<br/>计为额外大小。如果使用填充，则相同，它会计算额外的大小。您可以将position绝对值用于子元素。我解决了这个问题。 check this fiddle

Answer 3

嗯，#div2延伸到#div1以下的原因是因为除了父级的高度100％之外，#div2也被上面的四行文字推下来了它 - 所以它正好延伸到#div1之外的距离。

如何解决这个问题呢？嗯......我可以提供一个CSS解决方案，但它不是很灵活（采用JavaScript的解决方案肯定会更具可扩展性，并且维护工作量更少）。我稍微修改了你的HTML结构，现在它看起来像：

<div id="div1">Test
    <br/>Test
    <br/>Test
    <br/>Test
    <div id="div3">
        <div id="div2">Test</div>
    </div>
</div>

为了澄清我的更改，我在#div3周围添加了#div2元素。现在，对于我的CSS，我刚刚为#div3添加了此定义，并将body CSS修改为：

body {
    margin: 0;
    line-height:1.3em;
}
#div3 {
    position:absolute;
    top:5.2em;
    bottom:0;
    left:0;
    width:100%;
}

这种方法要求您知道#div1 #div3的顶部距离#div2（以及其子<body>}的距离，这需要您知道究竟有多高那四行文字是。由于浏览器经常渲染行高略有不同的文本，因此我为top指定了一个。之后，将行高乘以文本行数（本例中为4行）并将其设置为{{1}}属性是一个相当简单的问题。

这是一个JSFiddle来证明这一点。我希望这个答案很明确，而且正是你要找的！如果没有，请告诉我，我会尽力帮助。祝你好运！

Answer 4

<{1>}中的

，使用div1代替position: fixed;

高度百分比的Div不适合

4 个答案:

jsfiddle