2

中間コンテンツの可変幅でヘッダーとフッターを 100% に拡張したいと考えています。

ソースはhttp://jsfiddle.net/9dWcZ/にあります。

HTML:

<div class="header">
this is header
</div>

<div class="content">
  this is content
</div>

<div class="footer">
this is footer
</div>

CSS:

.header, .footer {
    width:100%;
    background:#999;
    height:200px;
    position:relative;
    float:left;
    clear:both;
    display:block;
}
.content {
    width:2500px;
    height:100px;
    background:#9B191B;
    float:left;
}

ヘッダーを固定したり、構造を変更したりしたくありません..

助けてください..

ありがとう、

4

2 に答える 2

1

このレイアウトは次のように実現できます。

要素を追加する必要があります.wrapper。これは不可欠です。

<div class="wrapper">
    <div class="header">this is header</div>
    <div class="content">this is content</div>
    <div class="footer">this is footer</div>
</div>

CSS の場合:

.wrapper {
    display: table;
}
.header, .footer {
    width:100%;
    background:#999;
    height:200px;
}
.content {
    width:2500px;
    height:100px;
    background:#9B191B;
}

display: table鍵は、.wrapperブロックに適用することです。

デモを参照してください: http://jsfiddle.net/audetwebdesign/7jxLC/

于 2013-09-25T12:22:29.717 に答える
0

では、中間点から拡張しますか? それが必要な場合は、以下を使用できます: margin-left:auto; margin-right:auto; 中心から幅が広がり始めます。

于 2013-09-25T11:58:20.600 に答える