Divide a div into four equal parts filling the viewport with a fixed nav bar

问题

So I have a fluid layout with a fixed nav. I have: the fixed nav itself, and a div containing four other divs that Im looking to fill the space beneath the fixed nav completely. I cant seem to make this happen without having some kind of scrolling of either the nav or the divs.

The nav is set to position:fixed
The div containing the content div is set to position:absolute height:100% width:100%
The four content divs themselves are set to float:left height:50% width:50%

Im not even certain this can be handled with css alone, if it can that would be awesome, if not, ill entertain other possibilities. Any help, as always, is greatly appreciated.

Development area: http://riverhousegolf.icwebdev.com

回答1:

Maybe there is solution with CSS only, but here is jQuery solution. Content below menu will fill rest of space, without scroll bars.

HTML markup will be:

<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

Most important part is jQuery. First, we need to get height of document (html), then height of menu. Then, we substract menu height from document height, and result is content height. Same result we will apply to top position of content, to avoid overlaping.

回答2:

Remove the "overflow-y: scroll;" attribute from your "html" selector in your style sheet.

edit: I think if you are to use pure CSS you are going to have a scroll bar. I made a fiddle to show how to at least stop the nav from cutting off th top of the other divs. I used a

<div class="spaceTaker" >

that bumps the rest of the page down.

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

Edit2: Try keeping all of the widths the same. But remove all of the heights where they are set to a percentage. The html element should have height: 100% but your tiles, etc. should not. Now put this jquery on your page.

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

Also make your nav position relative.

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

来源：https://stackoverflow.com/questions/15644245/divide-a-div-into-four-equal-parts-filling-the-viewport-with-a-fixed-nav-bar

标签

css

fluid-layout