CSS - 在Chrome中忽略了min / max-height值

时间:2012-12-06 03:00:13

标签: css google-chrome

我正在使用从here修改的代码来创建具有最小高度和最大值的主页。基本上,如果高度低于某个值(400px),那么它会滚动,如果它高于某个值(600px),那么它会被剪裁。它的方式与Bing主页类似。

这是我正在使用的代码的简化版本:

<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>

在Firefox和Internet Explorer中可以正常工作,但在Chrome中,broswer似乎忽略了min-height和max-height标记,而是将#container填充到页面的100%。窗口较小且所需的最小值,然后它将#container放在窗口的整个高度并滚动其余部分。

编辑:为了回答我自己的问题,我按了this link,引导我this one,这导致我实施此解决方案:

<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>

0 个答案:

没有答案