3

I'm using code modified from here to create a homepage that has a minimum height and a maximum. Basically if the height is below a certain value (400px) then it scrolls, and if it's above a certain value (600px) then it gets clipped. It's in a way like the Bing homepage.

This is a simplified version of the code I am using:

<html>
<head>
<style>
html,body{margin:0; padding:0; height:100%; min-height: 400px; max-height: 600px;}
div#container{position: relative; margin:0 auto; width:750px; background:#f0f0f0; height:auto !important; height:100%; min-height:100%; max-height: 600px;}
div#header{background:#ddd;}
div#footer{position:absolute; width:100%; bottom:0; background:#ddd;}
</style>
</head>
<body>
    <div id="container">
        <div id="header">Heading</div>
        <div id="content">Content</div>
        <div id="footer">Footer</div>
    </div>
</body>

Which works fine in Firefox and Internet Explorer, however in Chrome, the broswer seems to ignore the min-height and max-height tags and instead fills #container to 100% of the page. The window is smaller and the required minimum, then it puts #container at the entire height of the window and scrolls the rest.

Edit: To answer my own question, I followed this link, which lead me to this one, which lead me to implementing this solution: 

<html>
<head>
<style>
html,body{margin:0; padding:0; height:100%; min-height: 400px; max-height: 600px; position: relative;}
div#container{height: 100%; min-height: 400px; max-height: 600px; width: 800px; margin: 0 auto; position: relative;}
div#container2{position: absolute; left: 0; top: 0; width: 100%; min-height: 100%}
div#header{background:#ddd;}
div#footer{position:absolute; width:100%; bottom:0; background:#ddd;}
</style>
</head>
<body>
    <div id="container">
        <div id="container2">
          <div id="header">Heading</div>
          <div id="content">Content</div>
          <div id="footer">Footer</div>
        </div>
    </div>
</body>
Community
  • 1
  • 1
Garion
  • 53
  • 1
  • 9
  • The reason you might be having this problem is that styling on the html elements is pretty inconsistent between browsers. html will almost always size itself according to the viewport but yet you are trying to set its height along with a min/max. There are lots of other CSS properties that are inconsitent, too, like background images on html. – Rob Dec 06 '12 at 03:35
  • That was just in the truncated version from the original link, when I implemented it on my main project the only attribute for html was height:100% – Garion Dec 06 '12 at 03:46

0 Answers0