Question

我希望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>

根据一些数据，div与html partial的高度会有所不同。目前，如果原始高度增加，则隐藏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;
}

Answer 1

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

var height = $(window).height()

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

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

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

set div height using jquery (stretch div height)

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

1 个答案: