3

我正在使用从这里修改的代码来创建一个具有最小高度和最大值的主页。基本上，如果高度低于某个值（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 中，浏览器似乎忽略了 min-height 和 max-height 标签，而是将#container 填充到页面的 100%。窗口较小并且是所需的最小值，然后它将#container 放在窗口的整个高度并滚动其余部分。

编辑：为了回答我自己的问题，我点击了这个链接，它把我带到了这个链接，这让我实现了这个解决方案：

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

0 回答 0