Cover 100% of screen with two divs

Question

I have two divs called map and filters. Each of them has a solid border of 1px width. For the moment the map div is containing eight rows of images at different widths (I can provide a screenshot if necessary) and it has a fixed position. I want to put the filters div right beneath the map div which it has 82.75% height. I've tried different display and position values but with no success, either my first div collapse or the second one remains at the top of the screen. What should I do to have the both divs covering 100% of the screen one beneath the other?

My CSS code:

body {
    margin: 0px;
    width: 100%;
    height: 100%;
    background-color: #F7F7F7 !important;
}
#map {
    display: table;
    border-style: solid;
    border-width: 1px;
    width: 100%;
    height: 82.75%;
    position: fixed;
}
#filters {
    border-style: solid;
    border-width: 1px;
    width: 100%;
    height: 17.25%;
    position: fixed;
}

What should I do to have the both divs covering 100% of the screen one beneath the other? or side by side? — Mr. Alien
Why you don't set 'top:0'/'bottom:0' and 'left:0' values for them? — Agat
@Agat - just what I was going to say in an answer, you should post that. — Sinister Beard
@Mr.Alien I'm sorry for not explain myself well enough, I want basically that the map div to cover 82.75% of the screen height and the filters div to cover the remaining 17.25%; — MariusNV

luke luke · Accepted Answer · 2013-11-05T10:41:11

Applying bottom: 0 to #filters solves the problem.

EDIT: This happens because of borders - its width isn't added to the whole element size by default. You need to add these rules to both #map and #filters:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-box-sizing: border-box;

Cover 100% of screen with two divs

1 Answers