html - 100% height for body and its child elements -


i specifying background color body displays distance only. need full height , child elements too. 1 of child elements has border-right needs show on full screen height.

my css looks like(sample one) better check demo

demo page

   html,body {          height: 100%;           background-color: #fefefe;     }     .cover {          height: 100%;     }     .left_side {         float: left;          height: 100%;         border-left: 1px solid #ccc;         width: 31%;       }  

and html is

     <body>          <div class="cover">             <div class="left_side">             </div>          </div>       </body> 

and bgcolor , childs border seems up-to limited distance enter image description here problem guys need background , border 100% height.

remove height:100% body , html style.

instead of having border set left container, try setting border on content container instead.

your css like:

.large-9 .columns .right_side{border-left:1px solid #333;} 

the left column set 100% , renders correctly. problem doesnt take account overflow content cannot see, until scroll. other solution absolute or fixed position left container, , set top , bottom values 0.

css like:

.left_side .full_height{position:fixed;top:0;bottom:0;width:200px;} 

here's basic layout fixed left column - http://jsfiddle.net/wajtk/

and version fixed header - http://jsfiddle.net/wajtk/1/

you might pen - http://codepen.io/lukeocom/pen/kqafg


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

css - Firefox for ubuntu renders wrong colors -