将div分成四个相等的部分，用固定的导航栏填充视口
提问于 2013-03-26 18:02:30
所以我有一个固定导航的流畅布局。我有:固定的导航本身，以及一个包含其他四个div的div，我希望完全填充固定导航下的空间。如果不对导航或div进行某种滚动，我似乎无法做到这一点。
导航设置为位置:已修复
包含内容div的div设置为位置:绝对高度:100%宽度:100%
四个内容div本身设置为浮动:左高:50%宽:50%
我甚至不确定这是否可以单独用css来处理，如果可以，那就太棒了，如果不能，我会考虑其他的可能性。任何帮助，一如既往，我们都非常感谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-03-26 19:04:30
也许只有CSS才有解决方案，但这里是jQuery解决方案。菜单下面的内容将填满剩余的空间，没有滚动条。
超文本标记语言标记将是：
<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);最重要的部分是jQuery。首先，我们需要获取文档的高度(html)，然后是菜单的高度。然后，我们从文档高度减去菜单高度，结果是内容高度。同样的结果，我们将应用于内容的顶部位置，以避免重叠。
Stack Overflow用户
发布于 2013-03-26 18:16:45
从样式表的"html“选择器中删除"overflow-y: scroll;”属性。
CSS编辑：我认为如果你要使用纯，你会有一个滚动条。我做了一个小提琴，以显示如何至少阻止导航切断其他div的顶部。我使用了一个
<div class="spaceTaker" >这会使页面的其余部分凹凸不平。
http://jsfiddle.net/Dtwigs/XRJ8n/
Edit2：尝试保持所有宽度相同。但删除它们设置为百分比的所有高度。html元素的高度应为: 100%，但您的tiles等不应如此。现在把这个jquery放到你的页面上。
$( function () {
var pHeight = $("html").height() - $("nav").height();
$(".tile").height(pHeight / 2);
});同时使你的导航位置成为相对的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15644245
复制相关文章
腾讯云开发者
