1

を使用しないことを前提にテンプレートを作成していDIVsますが、フッターに問題があります。100% 幅のフッター (stackoverflow に少し似ています) を実際に下部に固定し、コンテンツが追加されたときにオーバーフローを修正または非表示にせず、背景色を維持できるかどうか疑問に思っていました。

これは可能ですか？

私のフィドル。

header, article {
    margin: 0 auto;
    display:block;
    width:500px
}
html, body {
    height:100%
}
body {
    min-height:100%;
    margin:0
}
header, article, section {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:black
}
footer {
    position:absolute;
    bottom:0;
    height:200px;
    width:100%;
    background:grey
}
footer p {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:white
}
footer article {
    height:50px;
    width:100%
}
footer section {
    background:black;
    height:50px;
    width:100%
}
footer section p {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:white
}
header, article {
    margin: 0 auto;
    display:block;
    width:500px
}
html, body {
    height:100%
}
body {
    min-height:100%;
    margin:0
}
header, article, section {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:black
}
footer {
    position:absolute;
    bottom:0;
    height:200px;
    width:100%;
    background:grey
}
footer p {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:white
}
footer article {
    height:50px;
    width:100%
}
footer section {
    background:black;
    height:50px;
    width:100%
}
footer section p {
    text-align:left;
    font:normal 1em Verdana, sans-serif;
    color:white
}
4

2 に答える 2

1

フッターがある例があり、fixedbody:after を使用してパディングを追加してスクロール可能にします。

jsfiddle: http://jsfiddle.net/wk8Jf/3/

または、ページをスクロールしたい場合：

jsfiddle: http://jsfiddle.net/wk8Jf/5/

于 2013-07-12T22:28:52.550 に答える
0

要素の絶対位置が問題のようです。

于 2013-07-12T22:06:06.537 に答える