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

Question

Hi all am created a html layout having two sides left and right left one having navigation menu and right having contents looks like

i need both has full-height has to come to bottom of the screen even there is very low contents.

now it looks like

now

here my fiddle

demo

moreover i tried full height for body and html to

body, html{
    height:100%;
}

.content{min-height:100%;} don't use height:100% for this block — Anon, Aug 14 '13 at 14:31
@Anon okay now check the fiddle i need both height:100% even when they have less contents in it..!http://jsfiddle.net/Vivekranth/GhxQL/10/ — , Aug 14 '13 at 14:47

score 4 · Accepted Answer · edited May 23 '17 at 11:57

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

oh cool.. :) then one more thing how to made a gap between those columns now they are display like table..? — , Oct 26 '13 at 05:55

score 3 · Answer 2 · answered Aug 14 '13 at 14:34

3

Use :

display: table-cell

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

answered Aug 14 '13 at 14:34

Itay

16,601
2
51
72

Good starting point, but it is half solution. If you remove the content, the ".content" div doesn't fill the page anymore. +1 for thinking it the right way, though. – Andrea Ligios Oct 25 '13 at 22:52

score 0 · Answer 3 · answered Oct 25 '13 at 16:22

0

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/

answered Oct 25 '13 at 16:22

Cameron Daigle

1

1

Sadly, if you put content inside it, it's not visible. Removing the hidden overflow and scrolling the page, the divs stop at the original viewport size: http://jsfiddle.net/hqkVh/17/ – Andrea Ligios Oct 25 '13 at 21:40
check my solution , it will fix the content problem – zEn feeLo Oct 26 '13 at 00:32

score 0 · Answer 4 · edited May 23 '17 at 12:05

0

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

edited May 23 '17 at 12:05

Community

1
1

answered Oct 26 '13 at 00:31

zEn feeLo

1,877
4
25
45

Indeed (you have to remove the wrapper div becase this only works for the outer, not for the inner, though). But even with that, if you populate one element and the other has lower content, when you scroll you will see that the lowest one will be limited to the viewport height, not page height: http://jsfiddle.net/abFsC/1/ This question is a bit different from your, two columns are involved and AFAIK the "table way" is the (only?) one to go. – Andrea Ligios Oct 26 '13 at 23:29
did you check this fiddle ? http://jsfiddle.net/LmDNx/14/ It's about MIN-Height DUDE, the red section can be the Main column you want and the blue section is the content inside of it, you see the red section is always 100% height, so there is NO PROBLEM, please think again about the structure, these questions are NOT DIFFERENT , just the way of ASKING is DIFFERENT, beside we have to make sure to Keep the original RATIO if we want to DO RESPONSIVE DESIGN the TABLE SOLUTION is Also Correct but the best thing of Min-height solution is keeping the ratio(keeping both Height 100% and min-height) – zEn feeLo Oct 27 '13 at 13:27
Can you fiddle it up like OP asked please? I'll upvote you for sure – Andrea Ligios Oct 27 '13 at 13:57
Why are you shouting BTW ? – Andrea Ligios Oct 28 '13 at 00:18

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

4 Answers4

Linked