CODEWITHSUNDEEP
htmlcss
0xbadf00d
0xbadf00d

Reputation: 18216

HTML5 + CSS3 100% height with margin

Given the following HTML layout:

<body>
    <header class="site-header">
    </header>

    <section class="site-section">
    </section>

    <footer class="site-footer">
    </footer>
</body>

I want to use 100% of the browser height for the header, section and footer. However, there's no problem to achieve that:

html, body { height:100%; }

.site-header  { height:10%; }
.site-section { height:80%; }
.site-footer  { height:10%; }

My problem is, that this won't work if I want to use a margin for each child of body:

body > * { margin:1%; }

No matter if there's a margin or not - the site should always use 100% of the browser height.

EDIT: It seems to more suitable for me to use a white border instead. However, same problem remains. Is it even possible to specify border-width in percent?

Upvotes: 4

Views: 6628

Answers (6)

iGanja
iGanja

Reputation: 2474

This can be easily accomplished using fixed positioning AND fixed heights for your header, footer, and margin.

<body>
    <header class="site-header"></header>
    <section class="site-section"></section>
    <footer class="site-footer"></footer>
</body>

html {
    height:100%;
}
body {
    padding:0;
    margin:0;
}
body > * {
    position:fixed;
    margin:5px 0;
    width:100%
}
.site-header {
    top:0px;
    height:80px;
    background:red;
}
.site-section {
    top:85px;
    bottom:85px;
    background:green;
}
.site-footer {
    bottom:0px;
    height:80px;
    background:blue;
}

And here is a Fiddle

Upvotes: 0

Gio
Gio

Reputation: 41

mmmm Did you try with something like this?

cssSelector{width:200px; border:20px; box-sizing:border-box}

The key is the box-sizing, if we don´t use it the final width is equals to 220px, but when I use box-sizing the final width is equals to 200px, so, you can to try and see what happens.

:)

Upvotes: 0

Bart Calixto
Bart Calixto

Reputation: 19725

I know this will look ridiculous and ugly, and stupid. Actually, it is. but i couldn't find a better way to approach exactly what you want without recurring to ugly markup.

HTML:

<header class="site-header">
</header>

<div class="spacer"></div>
<div class="spacer"></div>

<section class="site-section">
</section>

<div class="spacer"></div>
<div class="spacer"></div>

<footer class="site-footer">
</footer>

<div class="spacer"></div>

CSS:

html,body {height:100%;margin:0;} 
body > * { overflow:hidden;}
.spacer {height:1%;}
.site-header {height:8%;background-color:yellow; }
.site-section {height:78%;background-color:#ffcccc; color:#aaa;}
.site-footer {height:8%;background-color:#ccccff;}

DEMO

Upvotes: 2

sandeep
sandeep

Reputation: 92873

You can use css3 FLEX property for this:

body {
display: -webkit-box;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-box-orient: vertical;
    width:100%;
}
body header,body section, body footer{
    display:block;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
header{
    background:red;
    height:10%;
}
section{
    background:green;
    -webkit-box-flex: 3;
     -moz-box-flex: 3;
}
footer{
    background:yellow;
    height:10%;
}
html, body{
    height:100%;
    margin:0;
    padding:0;
}

http://jsfiddle.net/XMg2h/14/

UPDATED:

http://jsfiddle.net/XMg2h/15/

it's works till IE8 & above.

Upvotes: 0

js1568
js1568

Reputation: 7032

Just subtract the margin from the height of the elements:

.site-header  { height:8%; }
.site-section { height:80%; }
.site-footer  { height:8%; }

Upvotes: 0

Bart Calixto
Bart Calixto

Reputation: 19725

margin sums up to height. so basically you are doing:

.site-header { height:10%; margin:1%;} --> this translates to {height:12%}

To solve your problem, you can count the margin into the elements:

.site-header { height : 8% }

OR use the as wrappers without margin (which allows for px margins) and not styling the header, section and footer at all (which if im not wrong, will help to keep style consistent on older browsers also, specially if using selectors like > ).

body > * > div {margin: 1%}
<body>
    <header class="site-header">
        <div class="inner_header">
        </div>
    </header>

    <section class="site-section">
        <div class="inner_section">
        </div>
    </section>

    <footer class="site-footer">
        <div class="inner_footer">
        </div>
    </footer>
</body>

Upvotes: 0

Related Questions