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
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 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
Post a Comment