HTML 容器超出窗口高度

Question

我正在使用 kendo ui 和 boostrap v3。

我有一个用于顶部菜单的容器和一个用于主要内容的容器 (id=splitter)。

窗口高度等于981px，但主要内容保留981px，顶部菜单保留53px，而不是将两个容器的高度分开，总计为 1014px。

但应该有以下分配-> 53px 用于顶部菜单和928px 用于主要内容。我不知道如何去做。

我已经尝试使用"calc(100% - 53px)" 计算高度，但这不起作用。

这是我的 html 结构:

<div id="wms-app" style="height: 100%;">
    <div style="height: 100%;">
        <div id="wms-content" style="height: 100%;">
            <div id="mainmenu" class="k-content"></div>
            <div id="splitter" class="k-content" style="height: 100%;"> 
            </div>
        </div>
    </div>
</div>

解决方案:

最后它也与 calc(..) 选项一起工作:

#splitter {style="height: calc(100% - 53px);"}

我忘了重新加载所有内容，因为 kendo 框架会在页面加载后重新计算拆分器高度。

Answer 1

您可能已经知道:

100% height 将元素设置为占据高度的每个可用像素，因此行为是正确的。

根据您喜欢的最终结果和方法，我看到三种解决方案:

一种解决方案是将顶部菜单设置为

position: fixed;
top: 0;

这应该使菜单在 100% 内容之上流动。然后，您需要以考虑到菜单的方式将内容放置在 div 中。

第二个解决方案是将顶部菜单设置为 position:absolute，这也应该将其移出流程，但在滚动时保持原位。

第三种解决方案是这样的，它应该可以工作，但我还没有亲自测试过。

#topmenu
{
    height: 53px;
}
div
{
    height: 100%;
    margin-bottom: -53px;
}