2

フッターを正しくしようとしていますが、問題があります。ページの下部にフッターを配置することはできましたが、ウィンドウを小さくするとコンテンツが隠れてしまうことにすぐに気付きました。position:absolute を取り除くことでこれを修正できますが、これを行うとフッターがページの下部に留まらなくなります。

これを機能させるためにさまざまなことを試しましたが、これは私が現在見ているものです。誰かがここでアドバイスを貸してくれることを願っています..

CSSコード:

html, body {
    margin: 0;
    padding: 0;     
    height:100%;
}
#wrapper {
    width:900px;
    background-color:#FAFAFA;
    min-height:100%;
    margin:0 auto -45px;
    height: auto !important;
    height:100%;
}
#content{
    margin-top:40px;
    float: left;
    padding-left:100px;
    padding-bottom:30px;
    overflow:auto;  
}
#footer{
    height:30px;
    bottom:0;
    background:#D2CFCF;
    width:900px;
    clear:both;
    position:absolute;
}

最近、フッターで margin-top:-30px と position:relative を試しました。上記のコードでは、フッターは適切に下部に配置されていますが、ウィンドウを小さくするとコンテンツが隠れてしまいます。私に何ができる？

HTMLは基本的に次のとおりです

<body>
    <div id="wrapper">
        <div id="content">
        </div>
        <div id="footer">
        </div>
    </div>
</body>
4

1 に答える 1

3

フッターとタグposition: fixed;の下部marginにルールを使用します。<body>

http://jsfiddle.net/JGUYh/

BODY {
 margin: 0 0 60px 0; /* keep regular content clear of the footer */
}
#footer {
 position: fixed;
 width: 100%;
 height: 50px;
 bottom: 0px;
 background: #ccc;
 overflow: hidden;
}​

ウィンドウのサイズによっては、フッターがコンテンツを覆う場合があることに注意してください。ただし、スクロールすると、非表示のコンテンツが表示されます。

于 2012-09-04T21:18:26.507 に答える