CODEWITHSUNDEEP
csshtml
Alvaro
Alvaro

Reputation: 526

Why Height 100% doesnt working in one div

height 100% is working in some divs and in others doesnt(container). Height 100% works in Menu_left div but in container doesnt. I don't know why it didn't work to set height 100% in that div.

here is my html code:

<body>
<div class="All clearfix">
    <div class="Menu_left">Menu</div>
    <div class="Container_right">Container</div>
</div>
</body>

My css:

html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,q,s,strong,sub,sup,tt,var,b,u,i,center,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,footer,header,menu,section{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
.clearfix:after {
    visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


html{
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;

}


body{
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
    -webkit-background-size:cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:cover;
}
.All{
    width:100%;
    height:auto;
    min-height:100%;
    position:relative;
    overflow:hidden;
    background-color:rgb(35,31,32) ;
}
.Menu_left_float{
    float:left;
    background:blue;
    width:340px;
    height:100%;
    }
.Menu_left{
    position:fixed;
    top:0px;
    left:0px;
    width:340px;
    height:100%;
    background-color:#F0F;
}
.Container_right{
    position:relative;
    background-color:#00F;
    min-height:100%;!important
    height:100%;
    margin:0 0 0 340px;
}

Upvotes: 0

Views: 101

Answers (3)

LOTUSMS
LOTUSMS

Reputation: 10290

Your position:fixed is causing this. When you applied a fixed position, you took ownership of that entire side.

get rid of the fixed position and you'll see. And for more fun, give the other div a fixed position and you'll see that doing it instead!

It's all in the position bud.

So either make them both fixed, or use height auto with relative position. You will be fine either way.

Upvotes: 0

Jinto
Jinto

Reputation: 865

On adding position:fixed instead of position:relative, it is working.

http://jsfiddle.net/SVhm6/

.Container_right{
    /*position:relative;*/
    position:fixed;
    background-color:#00F;
    min-height:100%;!important
    height:100%;
    margin:0 0 0 340px;
}

Upvotes: 0

vsync
vsync

Reputation: 130750

http://jsbin.com/jezoqume/1/edit

give .All height of 1px and it will work. cheers.

Upvotes: 3

Related Questions