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!
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; }
width: -webkit-calc(100% - 60px); /* note, space necessary */ 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; brevity on prefixes used. use http://caniuse.com/ if need see ones necessary.
Comments
Post a Comment