ズーム/ビューに関係なく、全ページにわたって伸縮要素

Question

私は、このサイトや他のSEサイトのヘッダーバーのように、ページ全体に広がるヘッダーを持つWebサイトで作業しています。異なる解像度とブラウザのサイズで私のCSSをテストしている間、ブラウザがページのサイズより小さければ、その要素はユーザのブラウザを満たすにすぎないことに気付きました。たとえば、ブラウザのウィンドウが960ピクセル幅（サイトのメインコンテナの幅）より小さく、水平スクロールバーが表示された場合、ヘッダーは現在画面上のスペースを埋めるだけで残りの部分には伸びませんスクロールバーからアクセス可能なページ

私はこの問題を抱える唯一の人ではないことが判明しました：StackOverflowと他のSEサイトに同じ問題があります。

私はこれを修正するために何ができますか？

Answer 1

トリックは、要素を100％幅に設定し、幅の広いサイト要素の幅と同じ幅の幅を含めることです。

次の例ください：あなたが使用したいCSSがある

<div id="header"> 
    <!-- Exciting header links --> 
</div> 

<div id="content"> 
    <!-- Content that will be at most 1000px wide --> 
</div> 

を：

#header { 
    width: 100%; 
    min-width: 1000px; 
} 

ヘッダは、常に利用可能なスペースの100％を取るとれる時ので、これは動作します1000px以上の幅が必要です。これにより、幅の広いコンテンツによって生成された水平スクロールバーが、ヘッダーが早すぎるように見えるようになります。