Question

我正在使用从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>

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

0 个答案: