css - 将一个 div 分成四个相等的部分，用固定的导航栏填充视口(viewport)

Question

所以我有一个带有固定导航的流畅布局。我有:固定导航本身，以及一个包含四个其他 div 的 div，我希望它们完全填充固定导航下方的空间。如果不对 nav 或 div 进行某种滚动，我似乎无法做到这一点。

导航设置为position:fixed
包含内容div的div设置为position:absolute height:100% width:100%
四个内容 div 本身设置为 float:left height:50% width:50%

我什至不确定这是否可以单独使用 css 来处理，如果可以，那就太棒了，如果不能，我会考虑其他可能性。一如既往的任何帮助，我们将不胜感激。

开发区域: http://riverhousegolf.icwebdev.com

Answer 1

也许只有 CSS 的解决方案，但这里是 jQuery 解决方案。菜单下方的内容将填充其余空间，没有滚动条。

HTML 标记将是:

<div id="menu">SOMETHING IN MENU</div>
<div class="content">
    <div class="part1"></div>
    <div class="part2"></div>
    <div class="part3"></div>
    <div class="part4"></div>
</div>

CSS:

body,html{padding:0; margin:0;height:100%;width:100%;}

#menu {
    position: fixed;
    top: 0;
    background: blue;
    height: 50px;
    width: 100%;
}

.part1 {
    width:50%;
    height: 50%;
    float: left;
    background: purple;
}
.part2 {
    width:50%;
    height: 50%;
    float: left;
    background: red;
}
.part3 {
    width:50%;
    height: 50%;
    float: left;
    background: green;
}
.part4 {
    width:50%;
    height: 50%;
    float: left;
    background: silver;
}

.content{
    width: 100%;
    position: relative;
}

jQuery:

var height = $(document).height();
var menu_height = $("#menu").height();
var content_height = height - menu_height;

$(".content").css("height", content_height);
$(".content").css("top", menu_height);

DEMO

最重要的部分是 jQuery。首先，我们需要获取文档 (html) 的高度，然后是菜单的高度。然后，我们从文档高度中减去菜单高度，结果就是内容高度。我们会将相同的结果应用于内容的顶部位置，以避免重叠。