html - 用 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；在你的底部(确保你的内容有位置。)(如果未显示的内容在底部)。