11

基本的に<div>、フッターとしてネストされており、親 div は幅 1000px の中央に配置されています。フッター div の幅を拡張して、ブラウザの幅に合わせて親の外に出て、親の位置を維持できるかどうか疑問に思っていましたか?

ここに画像の説明を入力

4

7 に答える 7

3

.parent私の解決策は、要素の高さが伸びていることを前提としています。そうでない場合でも、.footer要素をページの下部に固定したいようです。そうである場合は、 を使用しposition:absoluteて子ブロックを親ブロックから外し、 を使用して下部に固定し、および を使用しbottom: 0pxて幅を広げることができます。left:0pxright: 0px

働くフィドル

更新:

次の Doctype 宣言を使用します。

<!DOCTYPE html>

また、要素でcss プロパティを.footer記述します。top:autoこのようなもの：

.footer{
    padding: 0px 15px;
    height: 50px;
    background-color: #1A1A1A;
    position:absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: auto;  /* added (IE FIX) */
}
于 2013-09-13T12:13:44.803 に答える
0

このCSSを試してください。

#footer {
    position:absolute;
    bottom:0;
    width:100%;
}
于 2013-09-13T12:01:36.390 に答える
0

このcssを試してみてください。これは間違いなくあなたが望むように動作します

html,body{
    height: 100%;
    padding: 0px;
    margin: 0px;
}
.parent{
    width: 400px;/*put your width here*/
    height: 100%;
    background-color: #ccc;    
    margin: 0 auto;
}
.footer{
    padding: 15px 0px;
    height: 30px;
    background-color: #000;
    position:absolute;
    bottom: 0px;
    left: 0px;
    width:100%
}
于 2013-09-13T12:21:14.747 に答える
0

たとえば、フッターの位置を相対的に設定し、左のプロパティを -100px に、幅を 1200px に設定できます。

親の div に含めない方がよいでしょう。独自の値が設定された独自の div として保持してください。

于 2013-09-13T11:58:21.177 に答える
0

このようにしてください

html

<div id="parent" class="wrap"></div>
<div id="footer"></div>

CSS

.wrap{width: 1000px;}
#footer{width: 100%;}
于 2013-09-13T11:58:39.257 に答える