Question

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

导航设置为位置：固定
包含内容div的div设置为position：绝对高度：100％宽度：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/

<强> EDIT2 ：尝试保持所有宽度相同。但要删除所有设置为百分比的高度。 html元素应该有高度：100％，但你的瓷砖等不应该。现在把这个jquery放在你的页面上。

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

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

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

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

2 个答案: