divsフルスクリーンでhtmlの2x2グリッドを作る

Question

私は4つのdivのグリッドを2x2の位置に作成しようとします。私はbasiclyこのように見て、1つのピクセル幅の境界線が欲しいものをdiv要素の間：

1|2 
-+- 
3|4 

のdiv要素は、そのサイズで同等である必要があり、合計で、彼らは任意の解像度でフルスクリーンにする必要があります。私の最初のアイデアは、行の2つのdivを作成することです。これまでのところ、行は完全に動作していますが、div間に境界線を追加するとスクロールバーが表示されます。明らかに、ボーダーは幅：50％に含まれていません。どのように私はこれを取得することができますか？

これまでのコードです。

私もフィドルデモでコードの仕事を作ってみました

<div class="row border" style="background-color: red;"> 

    </div> 
    <div class="row" style="background-color: blue"> 

    </div> 

CSS

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

      .row 
      { 
       Width: 100%; 
       Height: 50%; 
      } 

      .border 
      { 
       border-bottom: 1px solid black; 
      } 

HTML：DEMOをいくつかの理由で身長：体および/またはHTMLウォンに100％仕事はありません。

Answer 1

このようなものが必要ですか？私は...完全にゼロからそれを作った

Demo

何ここでやっている、各 50%広い左に浮かん4つの div要素を持っているとの国境が中断しないように box-sizingプロパティを使用していました divアライメントこれらの div要素は widthで 50%あると 50%

heightで

<div></div> 
<div></div> 
<div></div> 
<div></div> 

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

html, body { 
    height: 100%; 
    width: 100%; 
} 

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

div:nth-of-type(1) { 
    background: #ccc; 
} 

div:nth-of-type(2) { 
    background: #bbb; 
    border-left: 1px solid #f00; 
} 

div:nth-of-type(3) { 
    background: #aaa; 
    border-top: 1px solid #f00; 
} 

div:nth-of-type(4) { 
    background: #ddd; 
    border-top: 1px solid #f00; 
    border-left: 1px solid #f00; 
} 

Answer 2

チェックこのフィドル：あなたはその必要2X2のグリッドの代わりにmin-height

http://jsfiddle.net/N6JuV/7/

の使用

height。

あなたのwidht％とmargin％が100％に追加されるようにしてください。小さなマージンに小数点を使用することもできます。

例： http://jsfiddle.net/N6JuV/8/

Answer 3

あるボーダーとパディングの幅が要素の幅にを含まれているように、あなたはborder-boxに設定することができます素敵なCSSプロパティbox-sizingがあります。このようにして、余分に余分に余分なものを追加することができます。divには余裕がなくなりすぎないように心配する必要はありません。

また、実際には別のdivの内側にあなたの2つの行をラップする必要はありません - あなたはdivが50％広くする必要があることを指定した場合、あなたならば、正確に2行に収まるfloatそれらはleft。

HTML

<div class="box">Box 1</div> 
<div class="box">Box 2</div> 
<div class="box">Box 3</div> 
<div class="box">Box 4</div> 

CSS

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

.box { 
    box-sizing: border-box; 
    float: left; 
    width: 50%; 
    height: 50%; 
} 

/* This is one way of adding borders, 
    if you *always* know that you have exactly 4 cells 
    aligned like this */ 
.box:first-child { 
    border-bottom: 1px solid black; 
    border-right: 1px solid black; 
} 
.box:nth-child(2) { 
    border-bottom: 1px solid black; 
} 
.box:nth-child(3) { 
    border-right: 1px solid black; 
} 

は国境は、私が理解し、あなたのボックス間でそれらをしたいので、少しトリッキーであり、触れていないhttp://jsfiddle.net/RBWXe/

を参照してください。画面の端。これには、各ボックスのどの辺に境界があるかを正確に指定する必要があります。

この方法をやってみると、あとでグリッド内のボックス数を変更することができます。を境界線の色であるbody要素に使用し、ボックスを半分にします（calc機能を使用して）50％より狭く、それらの間に1pxスペースを収容します。参照してくださいここで

Answer 4

http://jsfiddle.net/yhRBy/2/は、私の解決策

<div class="d-table"> 
    <div class="d-row"> 
     <div class="d-cell first"></div> 
     <div class="d-cell first"></div> 
    </div> 
    <div class="d-row"> 
     <div class="d-cell first"></div> 
     <div class="d-cell first"></div> 
    </div> 
</div> 

そして、CSS、ここ

.d-table{ 
    display:table; 
    table-layout:fixed; 
    height:100%; 
    width:100%; // Assuming you have already set 100% height and width to body and html 
} 
.d-row{ 
    display : table-row; 
} 
.d-cell{ 
    display : table-cell; 
} 
.first{ 
    width : 50%; 
} 
.second{ 
    width : 50%; 
} 

デモでhttp://jsbin.com/osutos/1/edit