0

我正在使用剑道 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 框架会在页面加载后重新计算拆分器高度。

4

2 回答 2

1

您可能已经知道：

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

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

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

position: fixed;
top: 0;

这应该使菜单超过 100% 的内容。然后，您需要div在菜单中放置内容。

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

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

#topmenu
{
    height: 53px;
}
div
{
    height: 100%;
    margin-bottom: -53px;
}
于 2015-03-04T08:58:18.657 回答
0

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

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

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

希望这可以帮助！

于 2015-03-04T08:58:31.510 回答