How to making full height on every screen for section or div inside body?
css, css-float
Solution
(relevant) HTML:
<div class="wrapper">
<div class="left">
<!-- stuff -->
</div>
<div class="spacer"></div>
<div class="right">
<!-- stuff -->
</div>
</div>
(relevant) CSS:
body, html {
height : 100%;
}
.wrapper {
width : 600px;
display : table;
margin : 0 auto;
height : 100%;
}
.left, .right {
display : table-cell;
}
.left {
width : 30%;
}
.right {
width : 65%;
}
.spacer {
display : table-cell;
background : transparent;
width : 5%;
}
Running Demo
I used `normalized.css` to reset the styles and avoid the default margins otherwise applied to the `display: table;` div. Try removing it on the demo (External Resources menu on the left) to see what I mean.
Take a look here to read something else on CSS Resets.
EDIT: added the transparent spacer.
Problem
Hi all am created a html layout having two sides left and right left one having navigation menu and right having contents i need both has full-height has to come to bottom of the screen even there is very low contents. now it looks like here my fiddle demo moreover i tried full height for body and html to ``` body, html{ height:100%; } ```