Set a min-height on content container

oesoko39

New Member
I've a case where I don't see the solution. Here is my problem : I've a page with three sections (header, section and footer) footer must flush to the bottom all the time. And the section part should take all available place between header and footer, but must have a min-height that is different according the page (I'll set it manually on CSS).When the min-height is reached, a scroll on the whole page should be available.Here is the sample of code I'm using to set my header, section and footer taking all the available place.CSS\[code\]body { margin: 0}header, section, footer { left:0; right:0; overflow: hidden; position: absolute;}header { height: 70px; top: 0; background-color: green;}section { top: 70px; bottom: 195px; background-color: gray; min-height:300px;}article { overflow: hidden; background-color:lightyellow;}.news { position: absolute; bottom: -30px; width: 100%; background-color: lime;}footer { height: 195px; bottom: 0; background-color: pink;}\[/code\]HTML\[code\]<header> <div class="container"> <h2>My header</h2> </div></header> <section> <article> <div class="news"> <div class="row-fluid"> <a href="http://stackoverflow.com/questions/13836301/#">UP</a> </div> <div class="row-fluid"> <div class="container"> <div class="span6">News 1</div> <div class="span6">News 2</div> </div> </div> </div> </article></section> <footer> <div class="container"> My footer</div></footer>?\[/code\]A jsfiddle is available for the example : http://jsfiddle.net/Nk6uY/EditHow I can add a min-height on my section that when it's reached I get a scroll bar on my windows ?Edit 2I will add more informations about my problem. First, mostly of my content inside the section tag will be set in absolute. and hide somewhat and appear on actions (mostly javascript). For that reason, I know for each section which is the minimal height I need to see all my content if somebody click on the links.For my example, the div news is hidden and when you click it will need at least 360px to be visible. But if my windows is smaller than this I don't have scrolls on the windows and all my content is covered by the footer.
 
Back
Top