HTML容器超出窗口高度

Question

我正在使用kendo ui和boostrap v3。

我的顶级菜单有一个容器，主要内容有一个容器（ id = splitter ）。

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

但是应该有以下分配 - ＆gt;顶级菜单 53px ，主要内容 928px 。我不知道如何去做。

我已经尝试用＆＃34; calc（100％ - 53px）＆＃34; 计算高度，但这不起作用。

这是我的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％高度设置一个元素来占用每个可用的高度像素，因此行为是正确的。

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

一种解决方案是将topmenu设置为

position: fixed;
top: 0;

这应该使菜单流量超过100％的内容。然后，您需要以考虑菜单的方式在div内定位内容。

第二个解决方案是将topmenu设置为position:absolute，这也应该将其从流程中取出，但在滚动时保持原位。

第三个解决方案是这样的，应该可以工作，但我没有为自己测试过。

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

Answer 2

我认为你想要做的就是遵循这个概念（如果我错了，请纠正我）。

https://css-tricks.com/snippets/css/sticky-footer/

http://ryanfait.com/sticky-footer/

希望这有帮助！