HTML - 根据大小使 Div 扩展或收缩答案

【问题标题】：HTML - Make Div expand or contract based on sizeHTML - 根据大小使 Div 扩展或收缩
【发布时间】：2017-11-06 23:27:59
【问题描述】：

我想让一个 div 动态扩展，这样它下面的内容总是可见的。我有以下html：

<div class="header">
    <div class="expandableDiv container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                @Html.Partial("_company")
            </div>
        </div>
    </div>
    <div class="companyNavBar">
        <div class="navbar">
            <a href="#section-documents">Documents</a>
            <a href="#section-holdings">Holdings</a>
            <a href="#section-transactions">Transactions</a>
        </div>
    </div>
</div>
<div class="content">
    @{Html.RenderAction("Documents", "Company");}
    @{Html.RenderAction("Holdings", "Company");}
    @{Html.RenderAction("Transactions", "Company");}
</div>

根据一些数据，带有html部分的div的高度会有所不同。目前，如果原始高度增加，则 class=companyNavBar 的 div 将被隐藏。如何让它始终可见？

这是我的 CSS：

.content {
position: absolute;
top: 310px;
left: 19px;
right: 0px;
bottom: 0px;
overflow-y: scroll;
background-color: white;
}

.companyNavBar {
    margin-left: 14px;
}

【问题讨论】：

标签： html css

【解决方案1】：

如果您想使用 jQuery，您可以使用以下方法确定视口高度（如果需要，将窗口更改为特定的 div）

var height = $(window).height()

你可以对你的 div 做类似的事情并确定它应该有多大。然后，您可以相应地设置 div 的高度：

$('#divName').height(<new height>)

请参阅以下堆栈溢出问题，这与其他代码和帮助几乎相同：

set div height using jquery (stretch div height)

【讨论】：