...">
All geek questions in one place

HTML5 + CSS3 100% height with stock

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 is no problem for this:

 html, body { height:100%; } .site-header { height:10%; } .site-section { height:80%; } .site-footer { height:10%; }

My problem is that this will not work if I want to use a marker for each child of the body :

 body > * { margin:1%; }

Regardless of whether there is margin or not, the site should always use 100% of the height of the browser.

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

+4
source share
6 answers

I know that it will look funny and ugly and stupid. Actually. but I could not find a better way to get closer to what you want without repeating the 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

+2
source

Just subtract the edge from the height of the elements:

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

the sum of the amounts up to the height. so basically you do:

.site-header {height: 10%; margin: 1%;} → this means {height: 12%}

To solve your problem, you can calculate the margin in the elements:

.site-header {height: 8%}

OR use as borderless wrappers (which allows the use of px fields), and not at all stylize the header, section and footer (which, if im not mistaken, will help preserve the style in older browsers, especially if you use 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>
0
source

To do this, use the css3 FLEX property:

 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/

Works up to IE8 and above.

0
source

mmmm Have you tried something like this?

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

The key is window size , if we do not use it, the final width is 220px, but when I use the window size , the final width is 200px, so you can try and see what happens.

:)

0
source

This can easily be done 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 the fiddle

0
source

Source: https://habr.com/ru/post/1384354/

More articles:


All Articles