HTML 容器超过 window 高度

Question

我正在使用 kendo ui 和 boostrap v3.

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

Window 高度等于 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% 高度将元素设置为占据高度的每个可用像素，因此行为是正确的。

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

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

position: fixed;
top: 0;

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

第二个解决方案是将顶部菜单设置为 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/

希望对您有所帮助！

HTML 容器超过 window 高度

HTML container exceeds window height

html

css

twitter-bootstrap

kendo-ui

exceed