html - How to make the div contents fit into the parent div with height 100%? -


i looked through many posts , still can't 1 work...

my goal to style css (no javascript) height of div class "two" fit div class "container".

the container div's height change window resize why "two" div able change size accordingly. set container div height 300px here px 500px etc

please let me know if need more clarification. in advance!

http://jsfiddle.net/pn9qa/

html

<div class='container'>     <div class='top'>some text</div>     <div class='bottom'>         <div class='one'>header</div>         <div class='two'>items here</div>     </div> </div> 

css

.container {     height: 300px;     width: 100%;     border: 3px solid red; } .top {     height: 60px;     width: 100%;     background-color:pink;     float:left;  } .bottom {     width: 100%;     height: 100%;     background-color: green;     float: left; } .one {     width: 100%;     height: 30px;     background-color: orange; } .two {     width: 100%;     height: 100%;     background-color: yellow;     overflow: auto; } 

here's 1 using calc():

width: -webkit-calc(100% - 60px); /* note, space necessary */ 

here's 1 using display: flex

display: -webkit-flex; -webkit-flex-direction: column; 

here's 1 using padding/margins , z-index:

box-sizing: border-box; padding: 60px; position: relative; top: -60px; 

then, old, math version.

brevity on prefixes used. use http://caniuse.com/ if need see ones necessary.


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -