html - Make following div expand to bottom and then scroll -
i have following design
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%; }
Comments
Post a Comment