1

モックアップ画像をご覧ください

ここに画像の説明を入力

サイトのコンテンツの幅は固定です。画面の幅に応じて、赤い領域内の要素を引き伸ばす必要があります。画像のような場合は、緑と青のストライプが画面の最後まで表示されます。画面が広い場合、サイト コンテンツ領域 (赤の縦線内) は同じになります。しかし、青と緑の線はさらに伸びて、左側と右側のサイトに到達します。

絶対配置を使用して実装するつもりでした。しかし、ブロックの幅を知る必要があります。そして、それは異なる可能性があるため、javascriptを使用する以外は、その方法がわかりません。しかし、html と css のみを使用したいと思います。

4

2 に答える 2

1

これを実現する方法はたくさんありますが、最もクールな方法はbefore&after疑似要素を使用してエッジを埋めることです。

.container {
    width: 1200px; /* whatever... */
    margin: 0 auto;
}

.header {
    position: relative;
    background: #000; /* whatever... */
}

.header:before, .header:after {
    content: '';
    position: absolute;
    background: #000; /* whatever... */
    top:0 ; bottom: 0; width: 999em;
}

.header:before {
    right: 100%;
}
.header:after {
    left: 100%;
}

これがフィドルです：http://jsfiddle.net/bnket/

Chris Coyer によるこのクールな記事をチェックしてください: Full Browser Width Bars .

于 2013-09-03T16:45:26.363 に答える
0

css を使用して、中央のコンテンツが幅 800px であると仮定します。

800 プラス ストライプの幅を追加し、それについて左右に固定を割り当てます。

jsfiddleがないため、これが私が提供できるすべてです

于 2013-09-03T16:47:14.970 に答える