34

ページを同じ高さと幅(50-50%)の 4 つの等しい部分に分割したいと考えています。

JavaScript を使用したくありません。ブラウザ ウィンドウのサイズが変更された場合に、ブロック( <div>s)を自動的に(そして相対的に)サイズ変更したい。

私はCSSを長い間扱っていません。これを処理する方法がわかりません。

4

6 に答える 6

47

http://jsfiddle.net/CRSVU/のデモ

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

div {
  width: 50%;
  height: 50%;
  float: left;
}

#div1 {
  background: #DDD;
}

#div2 {
  background: #AAA;
}

#div3 {
  background: #777;
}

#div4 {
  background: #444;
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

于 2012-09-05T14:49:03.993 に答える
10

ソースコードの順序とは別に配置する場所を制御したい場合は、次のようにします。

html, body { height: 100%; margin: 0; padding: 0 }

div { position: fixed; width: 50%; height: 50% }

#NW { top: 0;   left: 0;   background: orange }
#NE { top: 0;   left: 50%; background: blue }
#SW { top: 50%; left: 0;   background: green }
#SE { top: 50%; left: 50%; background: red }
<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>
<div id="SW"></div>

JSFiddleデモ

注：リージョンにパディングが必要な場合は、次のように設定する必要がありbox-sizingますborder-box。

div {
  /* ... */
  padding: 1em;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

…そうでない場合、「50％」の幅と高さは「50％+ 2em」になり、視覚的なオーバーラップが発生します。

于 2012-09-05T15:31:29.353 に答える
5

ここにいくつかの良い答えがありますが、境界線とパディングの影響を受けないアプローチを追加するだけです:

html, body { width: 100%; height: 100%; padding: 0; margin: 0 }

div { position: absolute; padding: 1em; border: 1px solid #000 }

#nw { background: #f09; top: 0;   left: 0;   right: 50%; bottom: 50% }
#ne { background: #f90; top: 0;   left: 50%; right: 0;   bottom: 50% }
#sw { background: #009; top: 50%; left: 0;   right: 50%; bottom: 0}
#se { background: #090; top: 50%; left: 50%; right: 0;   bottom: 0}
<div id="nw">test</div>
<div id="ne">test</div>
<div id="sw">test</div>
<div id="se">test</div>

于 2012-09-05T20:58:32.337 に答える
0

これを試してください...明らかに、各divを25％に設定する必要があります。次に、必要に応じてコンテンツを追加する必要があります:)お役に立てば幸いです。

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#top_div {
  height: 25%;
  width: 100%;
  background-color: #009900;
  margin: auto;
  text-align: center;
}

#mid1_div {
  height: 25%;
  width: 100%;
  background-color: #990000;
  margin: auto;
  text-align: center;
  color: #FFFFFF;
}

#mid2_div {
  height: 25%;
  width: 100%;
  background-color: #000000;
  margin: auto;
  text-align: center;
  color: #FFFFFF;
}

#bottom_div {
  height: 25%;
  width: 100%;
  background-color: #990000;
  margin: auto;
  text-align: center;
  color: #FFFFFF;
}
<div id="top_div">Top- height is 25% of window height</div>
<div id="mid1_div">Middle 1 - height is 25% of window height</div>
<div id="mid2_div">Middle 2 - height is 25% of window height</div>
<div id="bottom_div">Bottom - height is 25% of window height</div>

于 2012-09-05T14:51:41.387 に答える