Question

我有一些标题和内容HTML包含在这样的容器中：

<div class='panel'>
    <div class='panel-heading'>
        Heading
    </div>
    <div class='panel-body'>
        Content
    </div>
</div>

我明确设置了父元素.panel和子元素.panel-body的高度：

.panel {
    height: 100%;
    width: 50%;
}
.panel-body {
    height: 10%;
    overflow-y: scroll;
}

但是，子.panel-body高度似乎忽略了CSS height规则，因为它的内容随意增长！您可以在this fiddle查看行为。为什么会这样？

对于我来说，.panel-body上的百分比计算高度和可滚动溢出对我来说非常重要。这可能吗？

（作为参考，this是我正在寻找的行为，但其高度由em而不是%计算。）

Answer 1

你可以这样做：

- 添加容器
- 给它高度100％
- 向面板容器添加最小高度

<强> HTML

<div class="container">
<div class='panel'>
    <div class='panel-heading'>
        Heading
    </div>
    <div class='panel-body'>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
    </div>
</div>
</div>

<强> CSS

html,body{height:100%;}

.container {
    height:100%;
}

.panel{
    width:50%;
    height:100%;
    min-height:100%;   
}

.panel-body {
    height: 20%;
    overflow-y: scroll;
}

* {
    /* for box visibility */
    border: 1px dashed grey !important;
    background-color: #ccc;
    padding: 5px !important;
}

DEMO http://jsfiddle.net/RWPQD/11/

Ps。我将.panel-body的高度设置为20％，但您可以相应地更改它。

Answer 2

父标记应该具有已知高度，在您的情况下<panel>确实具有已知高度但由于某种原因，它的父级没有特定高度，请在您的css中添加：

html, body { 
   height: 100%; 
   width: 100%;
 }

不确定它是否是最好的，但我认为它有效

CSS百分比高度无效

2 个答案: