1

This is my first attempt at anything with the <header>,<footer> elements in HTML5. Usually in XHTML I would have the div that was the footer inside of the container <div> and the center would expand all the way down with clear:both.

I am trying a 100% width template here and I am not getting the center area at 100% height. Can you guys see anything wrong with this?

The code is at: http://www.designinipad.com/html5test.html

or at:

https://gist.github.com/1524774

Thanks!

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
pcproff
  • 612
  • 1
  • 8
  • 30

2 Answers2

1

Whatever you did using the div element in the past will work identically using the header and footer elements. Like the div, these are just container elements and behave the same way.

Rob
  • 14,746
  • 28
  • 47
  • 65
0

If you set the height of container, body and html to be 100%, it should work:

body, html {
    height: 100%;
}

This question should be helpful: Make div 100% height of browser window

My only concern is that assigning a height to < html > and < body > does not seem to be standards compliant.

Could you work around it? Perhaps assign a min-height to the < div > with id container around 700px to push it down?

#container {
    min-height: 700px;
}
Community
  • 1
  • 1
dangerChihuahua007
  • 20,299
  • 35
  • 117
  • 206
  • This is a great point that it is not compliant. Min-height is great which will help me never go below 768px if in an ipad but what about if I'm on a screen. If I were to have a repeating edge for example (old school I know) how would I get it down to the bottom where the footer is? I usually use div's for everything and floats I never use absolute positioning so I'm not sure if that is what is causing this or not. Thanks. – pcproff Dec 27 '11 at 19:09
  • @Miguel - There are no standards to tell you whether you can or cannot apply height to those elements. It is not a compliance issue but yes you can do so. – Rob Dec 27 '11 at 20:22
  • I updated my gist code. I was going for a full screen type of look with no scrolling. So I added a overflow:none; to the html and made the min-height of container 1200px to account for multiple resolutions. This does not throw in any flags against validation. If I were to over to go back to "Grows with content" div I would make sure to have a lot more content and remove both of those tags. Thanks all! – pcproff Dec 27 '11 at 21:13