CODEWITHSUNDEEP
css
Biomehanika
Biomehanika

Reputation: 1540

Make body have HTML 100% height

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).

Upvotes: 0

Views: 113

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

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

Fiddle: http://jsbin.com/xumoqalivu

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

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*/
}

Upvotes: 1

Related Questions