Make body have HTML 100% height

Question

I am having trouble with CSS basics.

As you can see on this LIVE DEMO, the left navigation bar takes 100% of body's height. But due to the fact that body only takes 100% viewport's height, it cuts on the bottom of the viewport even when HTML, and content, are both longer than that.

I have tried may things such as:

body, html{min-height:100%}

or

html{height:100%}
body {min-height:100%}

with no positive result.

I need the left nav bar to be as long as HTML (as long as page content, the same should body have).

possible duplicate of [100% Min Height CSS layout](http://stackoverflow.com/questions/25238/100-min-height-css-layout) — Phrogz, Oct 20 '14 at 13:30

score 1 · Accepted Answer · answered Oct 20 '14 at 13:26

1

You can add in body display: table:

body {
  background: white;
  color: #000000;
  font: 300 14px/20px'Open Sans', sans-serif;
  background-color: #fafdfe;
  height: 100%;
  display: table;/*add display table*/
}

answered Oct 20 '14 at 13:26

Alex Char

32,879
9
49
70

Addiing this both on body and left nav, it seems to be solved. Just a question: is this correct solution for this problem? I dont see ususally this CSS atribute on BODY, and other websites' bodys take 100% of their content. Thats why I cant explain why I experience this.. – Biomehanika Oct 20 '14 at 13:29
Hmm not sure what potential problems this one will arise. Can't find any to be honest. – Alex Char Oct 20 '14 at 13:35
Thanks. I'll tick in 4 minutes, but if other user finds the reason for this behaviour and gives a logical solution (as this does not seem to be logical behaviour of bodys height), maybe I'll have to un-tick you. In any case this solves my problem now, very grateful for your help. – Biomehanika Oct 20 '14 at 13:37
1

No problem but i suggest to use a better html/css structure to achieve this result in future. – Alex Char Oct 20 '14 at 13:38
1

Found it: this was caused due to the fact that BODY did not have any in-flow HTML element. All were floated left. I created a display:block main container and positioned everything as inline-block. Now all goes right – Biomehanika Oct 20 '14 at 14:07
Yes is better approach. – Alex Char Oct 20 '14 at 14:08

score 1 · Answer 2 · answered Oct 20 '14 at 13:59

Actually, you don't need a display: table;. Check this out:

.sidebar {
    position: fixed;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(126, 190, 235, 0.2);
    border-right: 1px solid rgba(126, 190, 235, 0.6);
    width: 200px;
}

Make body have HTML 100% height

2 Answers2

Fiddle: http://jsbin.com/xumoqalivu