用 div 填充剩余高度（带有滚动条和第一个 div 的可变高度）答案

【问题标题】：Fill remaining height with div (with scrollbar and variable height of first div)用 div 填充剩余高度（带有滚动条和第一个 div 的可变高度）
【发布时间】：2015-09-11 22:36:41
【问题描述】：

我想要两个 div：

第一个 div .top 有一个可变高度 (height: auto)，因为如果你点击这个 div 内的一个按钮，jQuery 会加载更多的 HTML i 到这个 div。而当 jQuery 将更多的 HTML 加载到.top 时，显示的行数也会更多，并且 div 会变得更高。

第二个 div .bottom 必须填充页面的其余部分/“mother-div”。但是如果行太多，应该会出现一个滚动条（overflow-y: auto）。当.top 中的按钮被点击并且.top 变高时，.bottom-div 应该调整它的高度。所以第二个 div 只允许填充剩余的可用空间（即使单击按钮后空间变少了）

点击按钮之前

按钮点击后

HTML

<div class="leftcontent">
    <div class="leftcontent_header">
        <button>buttontext</button>
        <div id="jquery" style="display: none;">This content will be shown when when the button has been clicked.<br>text<br>text<br>text<br>text<br>text</div>
    </div>
    <div class="leftcontent_content">
        Maintext<br>
        Maintext<br>
        Maintext<br>
        Maintext<br>
        Maintext<br>
        Maintext<br>
        Maintext<br>
        Maintext<br>
        Maintext<br>
        Maintext<br>
        ...
    </div>
</div>

我目前的 CSS

.leftcontent {
    position: absolute;
    width: 65%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
}
.leftcontent_header {
    width: 100%;
    font-size: 18;
    padding: 5px;
    font-weight: bold;
    color: #000;
    overflow: hidden;
    height: auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid #ccc;
}
.leftcontent_content {
    overflow: auto;
    height: 100%;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

这段代码的问题是不是底部div中的所有内容都显示出来，而且滚动条看起来也很奇怪。

问题的图像：

【问题讨论】：

标签： html css

【解决方案1】：

也许是一个 padding-bottom: X px;在您的底部（以确保您的内容有位置。）（如果未显示的内容在底部）。

【讨论】：