0

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

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

我什至不确定这是否可以单独使用 css 处理，如果可以，那将是很棒的，如果不是，我会考虑其他可能性。任何帮助，一如既往，非常感谢。

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

4

2 回答 2

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);

演示

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

于 2013-03-26T19:04:29.987 回答
0

删除“溢出-y：滚动；” 样式表中“html”选择器的属性。

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

<div class="spaceTaker" >

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

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

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

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

还要使您的导航位置相对。

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

于 2013-03-26T18:16:45.343 回答