Mike Mike - 5 months ago 23
CSS Question

Chrome vs. IE/FF CSS height 100% Issue

My DIV (used as navigation) is not using Height: 100% when using IE or FF. Chrome works fine.


  • I did research and I tried using
    position: absolute;
    on different and multiple DIVs, but this never fixed it for me.

  • In my opinion body and html height is set to 100% (
    html, body { height: 100%; }
    ).

  • Clearfix doesn't work for me either (stackoverflow - clearfix).

  • Working with a
    overflow: hidden;
    couldn't help me.



I really wanna understand this issue, and I really try to unterstand while doing research, but i don't get it. Following: Jsfiddle, CSS & HTML Code, 2 Screenshots (Chrome and FF)

Jsfiddle: http://jsfiddle.net/nqsto6r9/4/

My CSS:

body, html {
height: 100%;
min-width: 1280px;
width: 100%;
}

body { margin: 0 auto; }

button {
margin-left: 5px;
margin-right: 5px;
width: 154px;
}

input {
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
padding-right: 5px;
width: 140px;
}

select {
margin-left: 5px;
margin-right: 5px;
width: 154px;
}

#content {
background-color: #FFFFFF;
float: left;
width: calc(100% - 170px);
}

#content_header {
background-color: #4C587E;
height: 25px;
width: 100%;
}

#header {
background-color: #3761A7;
float: left;
width: 100%;
}

#header_span {
float: left;
margin-bottom: 20px;
margin-left: 20px;
margin-top: 20px;
}

#inner_content {
max-width: 1024px;
float: left;
margin-bottom: 0.5cm;
margin-left: 0.5cm;
margin-right: 0.5cm;
margin-top: 0.5cm;
width: calc(100% - 1cm);
}

#nav {
float: left;
line-height: 1.5em;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 30px;
width: 150px;
}

#wrapper {
float: left;
height: 100%;
width: 100%;
display: table;
}

#wrapper_nav {
background-color: #C0C0C0;
float: left;
height: 100%;
min-height: 450px;
width: 170px;
}


My HTML:

<div id="header">
<span id="header_span" class="header_h1"></span>
</div>

<div id="wrapper">
<div id="wrapper_nav">
<div id="nav">
<a href=".html" class="nav_links">1</a><br />
<hr>
<a href=".html" class="nav_links">2</a><br />
<hr>
<a href=".html" class="nav_links">3</a>
</div>
</div>

<div id="content">
<div id="inner_content">
asda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
adasda<br>
</div>
</div>
</div>


Chrome (What I want):

enter image description here

Firefox (What I need to fix):

enter image description here

Thanks in advice.

Update

Right now using CSS display Property & CSS display Property - Playit to understand it ...

Update2 - Solution

Someone posted me the jsfiddle which I tried to understand before. I need to change:

#content {
background-color: #FFFFFF;
float: left;
width: calc(100% - 170px);
}
#wrapper {
float: left;
height: 100%;
width: 100%;
display: inline-block;
}
#wrapper_nav {
background-color: #C0C0C0;
float: left;
height: 100%;
min-height: 450px;
width: 170px;
}


into

#content {
background-color: #FFFFFF;
display: table-cell;
vertical-align: top;
}
#wrapper {
float: left;
height: 100%;
width: 100%;
display: table;
}
#wrapper_nav {
background-color: #C0C0C0;
display: table-cell;
vertical-align: top;
width: 170px;
}

Answer

Solution
Someone posted me the jsfiddle which I tried to understand before. I need to change:

#content {
    background-color: #FFFFFF;
    float: left;
    width: calc(100% - 170px);
}
#wrapper {
    float: left;
    height: 100%;
    width: 100%;
    display: inline-block;
}
#wrapper_nav {
    background-color: #C0C0C0;
    float: left;
    height: 100%;
    min-height: 450px;
    width: 170px;
}

into

#content {
    background-color: #FFFFFF;
    display: table-cell;
    vertical-align: top;
}
#wrapper {
    float: left;
    height: 100%;
    width: 100%;
    display: table;
}
#wrapper_nav {
    background-color: #C0C0C0;
    display: table-cell;
    vertical-align: top;
    width: 170px;
}