0

コード：

<html>
    <body>
        <div id="header">
        </div>
        <div id"content">
            Some random content
        </div>
        <div id="footer>
        </div>
    </body>
</html>

CSS：

html {
    height: 100%;
}
body {
    width:960px;
    height: 100%;
    margin: 0 auto;
}
#header {
    height: 100px;
}
#content {
    min-height: 100%;
}
#footer {
    height: 100px;
    position: relative;
    bottom: 0;
}

問題：私が読んでいることについては、このコードは、コンテンツが小さくても、コンテンツの高さdivがウィンドウの高さをすべて取得するようにする必要があります。問題は、コンテンツが非常に少ない場合でも、ウィンドウの高さよりも多くの時間がかかることです。

コンテンツが100％を超える高さになる方法と、それを修正する方法がわかりません。

4

3 に答える 3

3

それはうまく機能しています、あなたはそれがどのように機能するべきか誤解しています。ヘッダーとフッターを100ピクセルに設定しているため、サイトは実際にはページ全体に200ピクセルを追加しています。

それがコピーアンドペーストの場合、htmlエラーもあり、コンテンツdivにan =記号がなく、フッターdivに終了"がありません。

必要なのは、相対的なものではなく、フッターに固定されたラッパーと位置です。

http://jsfiddle.net/calder12/ghDUd/1/

于 2012-10-14T10:29:23.633 に答える
0

ヘッダーも100pxであるため、100％以上かかるため、ページの全高は100％+ 100pxになります。ヘッダーをコンテンツの折り返しの中に入れてください。これで、簡単に修正できます。

于 2012-10-14T10:30:35.037 に答える
0

適切なコードを想定しています：

 <html>
    <head>
        <style type="text/css">
        html {
height: 100%;
}
body{
width:960px;
height: 100%;
margin: 0 auto;
}
#header{
height: 100px;
}
#content{
min-height: 100%;
}
#footer{
height: 100px;
position: relative;
bottom: 0;
}
</style>
</head>
        <body>
           <div id="header">
           </div>
           <div id="content">
               Some random content
           </div>
           <div id="footer">
           </div>
        </body>
    </html>

contentdivにはウィンドウの高さの100％があります。つまり、headerウィンドウの高さより100px（の高さ）下で終了します。フッターを常に下に配置する場合はposition: fixed; bottom: 0、フッターを使用する必要があります。

于 2012-10-14T10:31:29.250 に答える