3

こことさまざまなチュートリアルを見てきましたが、必要な効果が得られません。

したがって、ページのコンテンツの高さが600ピクセル未満の場合は、その高さのコンテナーの下にフッターを固定する必要があります。

ただし、コンテンツによってコンテナの高さが600ピクセルを超える場合は、コンテナによってフッターがページの下に押し下げられる必要があります。

min-heightを使用して使用してみましたが、HTMLは次のようになります。

<body>
<div id="shell">
<div id="container">
Content
</div>
<div id="footer">Footer</div>
</div>
</body>

CSSが近づかないので、わざわざ投稿することはしません。

4

2 に答える 2

2

あなたはCSSトリックによってこれを行うことができます、

/*CSSコード*/

body, html{
    padding:0;
    margin:0;
    height:100%;
}

.wrapper{
    min-height:100%;
    position:relative;
}

.container{
    width:960px;
    margin:0 auto;
    padding-bottom:100px;
}

.header{
    height:100px;
    background-color:#066;
}

.footer{
    position:absolute;
    bottom:0;
    height:100px;
    background-color:#006;
    width:100%;
}


<div class="wrapper">
    <div class="container">

        <div class="header">
            Header
        </div>

        <div class="body">

        </div>


    </div>

    <div class="footer">
        Footer
    </div>

</div>

これが私のフィドルファイルです

于 2012-11-06T18:59:11.770 に答える
0

私はあなたが試したことを知っていますmin-heightが、なぜこれは適切ではないのですか？

#container
{
    background:#08e;
    min-height:600px;  
}


#footer
{
    background:#ddd;
}
于 2012-11-06T18:20:16.720 に答える