内部Div在父Div之外的100％高度

Question

发生这种情况的原因显然是因为上面的灰色框。现在我尝试使用97％，但是当你调整大小时，它不能很好地工作。我不能使用静态值，因为外部div可以改变。

有什么方法可以解决这个问题吗？没有JavaScript。如果用css不可能那么高度：expresion（???）;对吗？

顺便说一下，到目前为止我的代码是：

.outside_div {  
    width:227px;
    height:500px;
 }

.scrolabe_div {
    width:100%;
    height:100%;
    overflow:auto;
}

提前谢谢。

Answer 1

从可滚动div中删除高度：

.scrolabe_div {
    width:100%;
    overflow:auto;
}

当您指定基于height或width的百分比时，计算值与父容器相关。如果您移除.scrollable_div上的高度定义，那么它将在height中与其内容相关联。

Answer 2

您可以改为使用bottom属性。

.outside_div {
    position: absolute;
    width: 227px;
    height: 500px;
}

.scrolabe_div {
    position: absolute;
    width: 100%;
    top: 50px; /* since the top doesn't change, fix it here */
    bottom: 10px; /* set this accordingly, probably 10px */
    overflow: auto;
}

Answer 3

只需从您的CSS或样式中删除height即可。浏览器渲染内部元素的高度决定外部元素的长度，因此指定高度是不必要的