2

フッターを含む 2 ページの html があります。両方のページでフッターをページの下部に貼り付けたい。ページに垂直スクロールがない場合は正常に機能しますが、コンテンツが多く、ページにスクロールフッターがコンテンツの上にある場合。これが私のページレイアウトです：

<body>
    <div id="container">
        <div id="header"> Header </div>
        <div id="menu"> Menu </div>        
        <div id="content"> Content </div>
        <div id="footer"> Footer </div>                
    </div>
</body>

ここに私のcssがあります：

html, body
{
    width:100%;
    margin:0;
} 

#header, #menu, #content, #footer
{
    border:thin solid #000;
}

#content
{
    width:70%;
    margin: 0 auto;
    height:100%;
}

#footer
{
    position:absolute;
    bottom:0;
    width:100%;
    background-color:#06F;
}
4

3 に答える 3

2

CSS を次のように変更します。

#footer{
    width:100%;
    background-color:#06F;
}

これは動作中のライブデモです。

フッターを一番下に固定したい場合は、コンテンツに関係なく試してください。

#footer{
    width:100%;
    background-color:#06F;
    bottom:0;
    position: fixed;
}

ただしheight、フッターに を定義し、同じ量の をコンテンツに追加しpadding-bottomてください。そうしないと、一部のテキストがフッターによって隠される可能性があります

これは動作中のライブデモです。

于 2012-09-08T15:02:14.230 に答える
0

これを試すことができます

#footer {
   background-color: #0066FF;
   width: 100%;

}
于 2012-09-08T14:45:55.273 に答える
0 
#footer {background-color: #0066FF;bottom: 0;position: absolute;width: 100%;bottom:0px;}
        body,html {height:100%}

このようにして、出力が得られます

于 2012-09-08T14:58:50.500 に答える