How to making full height on every screen for section or div inside body?

问题

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%;
}

回答1:

_(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.

回答2:

Use :

display: table-cell

Here's the result: http://jsfiddle.net/GhxQL/6/

回答3:

You've got the right CSS in your fiddle; you just have some errors in the code.

Make sure your lines of CSS end in ; instead of : – there are a few lines in which you have colons instead of semicolons. And change your first line from htm, body to html, body.

Updated fiddle: http://jsfiddle.net/hqkVh/7/

回答4:

Ok Let's make the equation HARDER !!

so if you have RESPONSIVE WEB DESIGN and WANT TO USE BOTH HEIGHT and MIN-HEIGHT and also Height All the Time 100% What's THEN ?

if you use HEIGHT 100%, u cant handle All of the content of your columns, It's obvious by resizing the browser the Height is 100% and the content dont show completely

You might wanna CHECK THIS SOLUTION from my own question, the MIN-HEIGHT Solution

PLEASE CONSIDER THESE QUESTIONS ARE NOT DIFFERENT JUST THE WAY OF ASKING IS DIFFERENT

I suggest Use Min-Height 100% and Height Auto

来源：https://stackoverflow.com/questions/18234497/how-to-making-full-height-on-every-screen-for-section-or-div-inside-body

标签

css

css3

css-float