100% Not Working

Question

I'm having an issue with the age-old problem of 100% height. I know this problem is asked a lot, and I have reviewed this, this, this and countless more. I want to create a basic fixed header, side navigation and main article area, that looks like this:

how it should look

But, for some reason it's looking like the following (I put 200px padding in the blue bar just to have it appear).

how it does look

My HTML looks like the following:

<!DOCTYPE html>
<html>
<head></head> 
<body>

<header></header>

<section>

<nav></nav>

<article></article>

</section>

</body>
</html>

And my CSS looks like this:

* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }

body, html { height: 100%; } 

header {
  background: #6c6363;
  top: 0;
  z-index: 100;
  height: 100px;
  left: 0;
  position: fixed;
  right: 0;
}

section {
  min-height: 100%;
  overflow: auto;
  position: relative;
  padding-top: 100px;
}

nav {
  background-color: #747feb;
  float: left;
  min-height: 100%;
  padding-bottom: 200px;
  width: 150px;
}

article {
  background: #74eb8a;
  margin: 20px 20px 20px 170px;
  min-height: 100%;
  padding: 20px;
  position: relative;
}

As you can see, nothing too special. I know that section needs 100% height, and so does body and html. I can position the nav and acticle absolutely, and make something like this:

enter image description here

But, in my actual site (I simplified it for this), the side navigation has drop-downs, which will change the navigation height dynamically. This causes the following to happen:

enter image description here

Absolutely positioned elements won't change the height of the relative wrapper, so I need to float them. However, floating them doesn't make the height become 100%.

I have even made a JSFiddle to show the problem: http://jsfiddle.net/g8VjP/

If anybody can help me out, I'll really appreciate it.

Thank you!

PS: I'm all for using calc() if it works!

SOLUTION

I modified Mayank's answer and managed to come up with a solution. I had to add a couple wrappers, but it worked. My HTML now looks like the following:

<!DOCTYPE html>
<html>
    <head></head> 
<body>

<header></header>

<section>

<nav></nav>

<div class="cell-wrap">
    <div class="table-wrap">
        <article></article>
    </div>
</div>

</section>

</body>

</html>

With the key being the cell-wrap and table-wrap. I have the nav is one table-cell and the .cell-wrap is another. With the nav having a fixed with, the .cell-wrap fills in the rest. However, I want spacing around the article, so I added .table-cell and made that into a table. That then expands and fills the height and width of the .cell-wrap. I then add 30px padding to give a space around the article (because margins don't work on table-cells) and made the article a table cell.

A bit confusing, but it works!

My CSS is as follows:

* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }

body, html { height: 100%; } 

header {
  background: #6c6363;
  top: 0;
  z-index: 100;
  height: 100px;
  left: 0;
  position: fixed;
  right: 0;
}

section {
  display: table;
  height: 100%;
  min-height: 100%;
  padding-top: 100px;
  position: relative;
  width: 100%;
}

nav {
  background-color: #657182;
  display: table-cell;
  min-height: 100%;
  width: 150px;
}

.cell-wrap {
  display: table-cell;
  height: 100%;
  min-height: 100%;
}

.table-wrap {
  display: table;
  height: 100%;
  padding: 30px;
  width: 100%;
}

article {
  background: none repeat scroll 0 0 #FFFFFF;
  display: table-cell;
  min-height: 100%;
  padding: 20px 20px 120px;
  z-index: 1;
}

Here's the fiddle. Not sure why there's a scroll bar at the bottom though, but it seems fine if you show it just normally in your browser.

Here's an [example](http://jsfiddle.net/AxEPc/1). [caniuse calc()](http://caniuse.com/calc) — Vucko, Dec 13 '13 at 07:17

myajouri · Answer 1 · 2013-12-13T12:28:19.133

3

height: 100% means 100% of the containing block's height. Your containing block, section, does not have a defined height (but a min-height instead). You can either:

Change min-height: 100% on section to height: 100%. or...
Keep min-height: 100% and add a height: 1px (or anything less than 100%) which will be overridden by min-height.

The key here is to have a height property set on the parent.

edited Dec 13 '13 at 12:28

answered Dec 13 '13 at 07:22

myajouri

3,076
18
13

score 1 · Accepted Answer · answered Dec 13 '13 at 07:26

display:table and display:tabel-cell are you friends here mate!!
Updated your fiddle to slight workarounds and here you go : DEMO

CSS to modify :

section {
    min-height: 100%;
    overflow: auto;
    position: relative;
    padding-top: 100px;
    display:table;/* addition */
}
article {
    background: #74eb8a;
    margin: 0px 20px 0px 170px;
    min-height: 100%;
    width:100%;
    height: 100%;
    position: relative;
    display:table-cell; /* addition */
 }

Additionally i took the liberty to remove the extra padding that you have placed inside article , insert a div or section inside article and assign padding to it if it works!!

This didn't work exactly for me, but it did lead me in the right direction to solve my problem. I would have never thought of using tables and table-cells. To me, that just seems so hacky! But it worked! See question for solution. Thanks again! — Kenton de Jong, Dec 14 '13 at 16:43

score 0 · Answer 3 · answered Dec 13 '13 at 07:34

try this :

nav {
  background-color: #747feb;
  width: 150px;
  position : absolute;
  top : 100px;
  left : 0;
  bottom : 0;
}

 article {
  background: #74eb8a;
  position: absolute;
  top : 100px;
  left : 150px ; /* nav width*/
  bottom : 0;
  right : 0;
 }

100% Not Working

3 Answers3