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

Question

我想要两个div：

第一个div .top有一个可变高度（height: auto），因为如果你单击这个div中的一个按钮，jQuery会加载更多的HTML到这个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中的所有内容都会显示，滚动条看起来也很奇怪。

问题图片：

Answer 1

也许填充底部：X px;在你的底部（为了你的内容，确保有位置。）（如果未显示的内容在底部）。