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