-1

当我在下面的 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
}
4

4 回答 4

0

由于您缺少溢出属性，它会消失。在#div2 上将其设置为隐藏好吗？

于 2013-08-10T18:38:05.453 回答
0

好问题。Test<br/>算作额外尺寸。如果您使用填充，则相同，它会计算额外的大小。您可以对子元素使用绝对位置。我解决了这个问题。检查这个小提琴

于 2013-08-10T18:51:58.237 回答
0

好吧，之所以#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，并将bodyCSS 修改为：

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

这种方法要求您知道要从顶部（及其子项）开始多远#div1，#div3这#div2进一步要求您确切知道这四行文本的高度。由于浏览器通常会呈现行高略有不同的文本，因此我为<body>. 之后，将行高乘以文本行数（在本例中为四行）并将其设置为top属性是一件相当简单的事情。

这是一个JSFiddle来演示它实现了什么。我希望这个答案很清楚，并且是您正在寻找的！如果没有，请告诉我，我会尽力提供帮助。祝你好运！

于 2013-08-10T19:45:43.827 回答
0

在div1, 使用position: fixed;而不是position: absolute;

jsfiddle

于 2013-08-10T19:51:39.527 回答