html - 如何固定<div>高度

我有一个问题来使DIV具有固定的高度。以下是代码。
除#gridDiv外，所有元素都包含其他一些元素。 gridDiv将在运行时附加到网格。而且我希望gridDiv占据屏幕的60％，无论它是否具有网格。并且，如果网格太长而无法放入gridDiv DIV中，则希望gridDiv具有滚动条。

当前，gridDiv仅具有内联高度。我怎样才能实现自己想要的？谢谢。

<div id="mainDiv" style="display: block">

    <div id="topDiv" style="display: block; height:20%; text-align:center"></div>

    <div id="bottomDiv" style="display: block; height:80%">
        <div id="gridDiv" style="display: block; height:80%"></div>
        <div id="buttonDiv" style="display: block; width:100%; height:20%; text-align:center"></div>
    </div>

</div>

最佳答案

具有您的要求和示例代码的解决方案：


  gridDiv容器必须始终占据屏幕的60％


假设您的div如下所示：<div class="gridDiv">您可以使用以下代码：

html, body{
    height:100%;
}

.gridDiv{
    height: 60%;
}

  如果里面的内容溢出，gridDiv有一个滚动条

.gridDiv{
    overflow:scroll;
}

查看完整的div，并在this JSFiddle上填充文字。