ブラウザのサイズを変更したときにdivレイヤが重複しないようにするにはどうすればよいですか？

Question

私はここ数週間、レイアウトを適切に設計する方法を学びました。私は基本的に私が自分のウェブサイトのレイアウトで完璧なものを持っていると思って、Wordpressにコードを転送する準備ができていました...そして私は誤って私のウェブブラウザをリサイズし、私のdivのレイヤーがすべて重なっていることを発見しました。それは同じトップdivにある私のヘッダー画像とナビゲーション魔女だけでなく、絞り出されていること、主に私の中央コンテンツdivだかのように

は、基本的にはそれが見えます：

は、ここでは次のようになります。私のフッターも同様に絞られています。私はこの問題を解決するためにインターネットを検索しましたが、事を見つけられないようです。

ブラウザのサイズを変更したときにdivがそのまま残るように修正するにはどうすればよいですか？

Answer 1

私はそれを理解しました。私の中心のコンテンツマージンの幅は、直接的な幅（500px）ではなくマージンによって決まることが分かりました。したがって、ページのサイズが変更されるたびに、ブラウザの両側の余白が元のままになり、列全体が小さくなりました。私は余白を取り除き、列にページ上に座りたい位置を指定し、その幅を正当化するだけでした。

Answer 2

CSSを投稿できますか？

最も簡単な方法は、ブラウザウィンドウのサイズがレイアウトのサイズに影響を与えないように、すべての列に比較的暗いwidth設定を与えることです。流体幅の列を動かすことは、より複雑で、レイアウトの詳細によります。

Answer 3

ウォルター氏によると、あなたのCSSは役に立ちそうです。しかし、主な問題は、コンテンツのdivにすべてのコンテンツを含めることができないため、div内のコンテンツがを他のdivにオーバーフローするであることです。
あなたのCSSではdivのオーバーフロープロパティをauto（スクロールバーを表示）またはhidden（コンテンツがdivの外に出た場合は非表示にする）に設定してみてください。

overflow:auto; 

または

overflow:hidden; 

Answer 4

EMSであなたの幅とフォントサイズを発現します。 ここには良い計算機があります： http://riddle.pl/emcalc/

パーセンテージも機能します。

stackoverflowでCSSを確認して、ここでブラウザのズームレベルのサイズを変更してください。すべてのズームレベルですべてのサイズがうまくリサイズされます。

Answer 5

min-widthのプロパティを確認してください。ビューポートの幅はそれほどのようなCSS3 Media Queriesでのxピクセル以下であるとき別のオプションは、別のスタイルシートを適用している：

@media all and (max-width: 30em) { 
    /* Alternative narrow styles */ 
} 

かそこら：

<link media="all and (max-width: 30em)" 
     rel="stylesheet" href="narrow.css" /> 

CSS3メディアクエリまだ広くサポートされていないので、あなたがしたい場合がありますwindow.onresizeイベントを通じて、JavaScriptを使用した「ナロー」スタイルシートを適用するソリューションを検討してください。そのようなソリューションにはjQueryをお勧めします。

Answer 6

最小幅で試すこともできます。私は中央のdivが流動的で、サイドバーが固定幅であると仮定しています。

Answer 7

私のDIVコンテナに幅と高さがある場合、同じ問題がありました。最小幅を入れない限り幅以外は変更されません。私が持っていた問題は、ブラウザのウィンドウを次の行に行きたいと思ったときでした。

私はコンテナ内に高さと幅を設定しました。私が高さを設定しないうちに、divsは高さを決定させました。