html - Make following div expand to bottom and then scroll -


i have following design

enter image description here

how can make orange div expand head bottom, , scroll if content bigger, @ same time keep footer @ bottom of page?

i tried postioning div position:absolute bottom:footers's height , overflow-y:scroll, if overlaps head.

you can set header , footer elements position: fixed top , bottom respectively. there need add padding-top , padding-bottom central content div content within won't overlap. try this:

<header></header> <div id="content"></div> <footer></footer> 
header {     height: 150px;     position: fixed;     top: 0;     width: 100%; }  #content {     padding: 150px 0 100px; }  footer {     height: 100px;     position: fixed;     bottom: 0;     width: 100%; } 

example fiddle


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -