将 div 分成四个相等的部分，用固定的导航栏填充视口

Question

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

导航设置为位置：固定
包含内容 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）的高度，然后是菜单的高度。然后，我们从文档高度中减去菜单高度，结果就是内容高度。我们将相同的结果应用于内容的顶部位置，以避免重叠。

Answer 2

去掉“overflow-y:scroll;”样式表中“html”选择器的属性。

编辑： 我认为如果您要使用纯 CSS，您将拥有一个滚动条。我做了一个小提琴来展示如何至少阻止导航切断其他 div 的顶部。我用了一个

<div class="spaceTaker" >

这会使页面的其余部分向下颠簸。

http://jsfiddle.net/Dtwigs/XRJ8n/

编辑2： 尝试保持所有宽度相同。但是删除所有设置为百分比的高度。 html 元素应该有 height: 100% 但你的图块等不应该。现在把这个 jquery 放到你的页面上。

$( function () {
    var pHeight = $("html").height() - $("nav").height(); 
    $(".tile").height(pHeight / 2);    
});

同时使您的导航位置相对。

http://jsfiddle.net/Dtwigs/XRJ8n/