0

On this page http://dev.morrisononline.com/index.php/ inside html and body there is a wrapper div containing the whole site and inside that is a page div containing everything. Both are 560px high but I need them to be 100%. I can change them to a different pixel value by adding height: 900px; to the CSS but without that I don't understand where those 560px come from. Why are they 560px and can I set them to be 100%?

I am using Chrome with developer tools and IE10 for testing.

lukaspanic
  • 31
  • 1
  • 1
  • 5
  • 1
    height: 100% doesn't work like you are intending. The div will expand vertically based on its contents. If you want the height to fill the window, you can try setting the height with javascript on page load and on resize events. – Nick Sep 11 '13 at 18:30
  • @Nick The content is higher than the container though. Shouldn't it have expanded already? I just want it to scale with the content. – lukaspanic Sep 11 '13 at 19:12
  • I looked at your linked page and everything is being rendered as expected. The flow of your page is being broken by several things (perhaps you know of this already) causing it to act counter-intuitively: .header is floated as well as position:fixed, .main-container is positioned 150px from the top of its container, .footer-container is positioned 152px from the top of its container. If you get rid of this positioning stuff your page looks the same, but the flow is not broken and the container will expand correctly. Use chrome or ie dev tools to play with styles and get it right. – Nick Sep 11 '13 at 19:28
  • @Nick first of all thanks for taking the time to help me. You are correct that the positioning of the header is overkill and I removed `float:left;`. The `position:fixed:` and `top:150px;` for the main container need to stay though because I don't want the header to scroll but rather the content to scroll under the fixed header (I hope I am doing that right). The footer has `top:152px` as a cheap fix because I can't figure out why the .wrapper and .page are fixed at 560px. If those would adjust to the content, the footer would start right under the content. – lukaspanic Sep 11 '13 at 20:01
  • Well at least you now know why that height value is not what you thought it should be: some elements are being positioned outside of their containers with your css. Actually getting the main container to fill the browser window is more tricky. This [question](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) describes several different options. – Nick Sep 11 '13 at 20:15

1 Answers1

0

I think you want what is commonly know as a "sticky footer". Check for instructions here http://ryanfait.com/sticky-footer/

riverstorm
  • 550
  • 5
  • 8