html - コンテンツのサイズをウィンドウサイズに変更

Question

私は新しいウェブサイトをデザインしていますが（今のところ何もありません）、その中のコンテンツを実際のウィンドウサイズにサイズ変更するのに苦労しています。写真は千の言葉を話します。最初の写真は正しい方法です。下の写真は、ウィンドウのサイズを変更したときの正しい方法です。

<div class="header">
<div class="hdrmast-topbar">
    <div class="container">
        <span>Test :: Link 1 | Link 2</span>
    </div>
</div>

ヘッダーセクションに2つのバーがあり、そのうちの1つはコードに存在するhdrmast-topbarです。親は固定され、スクロールとともに移動します。ただし、たとえばhttp://incub.ro/のように、ウィンドウに合わせてコンテンツのサイズを変更する必要があります。

現時点では、この問題を実験していたため、ヘッダーは相対位置の状態になっています。

/* Header */

.header { min-width: 100%; position: relative; }
.hdrmast-topbar { background-color: #000; width: 100%; max-height: 25px; font-size:   11px; color: #fff; font-weight: bold; text-align: right; padding-top: 5px; padding-bottom: 5px; }
.hdrmast-topbar span { margin: 0; padding: 0; }

/* Global */

.container { width: 1120px; margin: 0 auto; }

ありがとうございました。

Answer 1

コンテナの最大幅を1120px、幅を100％にすることができます。

​.container{
    margin: 0 auto;
    background:blue;
    max-width:1120px;
    width:100%;
}​

JsFiddle： http: //jsfiddle.net/tDjA9/2/embedded/result/

これがお役に立てば幸いです。あなたの質問が正しいことを理解しました。..:-)

編集 -

投稿したWebサイトと同じ効果を得るには、代わりにposition：fixedを適切に使用する必要があります。

これを示すために、新しいjsfiddleを作成しました。http://jsfiddle.net/tDjA9/6/embedded/result/ :-)

Answer 2

取り除くだけ

.container { width: 1120px;

代わりに使用width: 100%;...