html - Stackin DIVs (possibly pure CSS) fixed-height and non fixed one -
i everybody! cannot figure out best solution obtain layout these:
+------------------------------------------------------------+
| div 0 , variable height
+------------------------------------------------------------+
| div 1 , variable height
+------------------------------------------------------------+
| div 2 , variable height
+------------------------------------------------------------+
| div 3 , fixed height
+------------------------------------------------------------+
| div 4, variable height, must scrollable (indeed contains table should scrollable)
+------------------------------------------------------------+
| div 5 , fixed height, sticked @ bottom, visible!
+------------------------------------------------------------+
i tried either display: table/table-row , position absolute/relative solution cannot obtain @ all!
edit: nice if same behaviour obtained wrapping div3, div4, div5 div.
edit2: solution display:table
jsfiddle
however, possible make div#cont
scrollable?
thank you
something this??
html
<div class='commondiv'>variable height<br>variable height</div> <div class='commondiv'>variable height<br>variable height</div> <div class='commondiv'>variable height<br>variable height</div> <div class='div1'>fixed height</div> <div class='div2'>fixed height, scrollable<br>fixed height, scrollable<br>fixed height, scrollable<br>fixed height, scrollable<br></div> <div class='div3'>fixed height @ bottom</div>
css
.commondiv{ float:left; width:100%; border:1px #000000 solid; } .div1{float:left; height:50px; border:1px #000000 solid; width:100%;} .div2{float:left; height:50px; overflow:scroll; border:1px #000000 solid; width:100%;} .div3{position:fixed; bottom:0; height:50px; border:1px #000000 solid; width:100%;}
Comments
Post a Comment