8081


CSS3の勉強兼、Bootstrap3.2の勉強をしています。

ヘッダ、フッタがある状態で真ん中の部分を６分割しようとしています。  
縦は３分割できたのですが、縦が２分割できません。  
現在は高さを５０％としていしていますが、明らかに２分割しているとは言えません  
縦も２分割したいのですが、どのように修正したらよいでしょうか

また、現在はDIVタグ内部にテキストを配置しておりますが、  
将来的には画像を配置してウィンドウサイズに合わせてリサイズする予定です。

ご教授願います。

application.html.erb

[code]

    <header class="navbar navbar-fixed-top" role="nav">
    </header>
    
    <div class="my-container">
      <%= yield %>
    </div>
    
    <footer class="navbar navbar-fixed-bottom" role="nav">
    </footer>
    
[/code]

css

[code]

    header {
    
      height: 80px;
      background: red;
    }
    
    footer {
    
      height: 80px;
      background: red;
    }
    
    .my-container {
    
      margin-top: 80px;
      height: 100%;
    
      .wrap {
    
        width: 100%;
        height: 50%;
    
        .item-1, .item-2, .item-3, .item-4, .item-5, .item-6 {
    
          background: blue;
          height: 100%;
          width: 33.333333333%;
          float: left;
        }
      }
    }
    
[/code]

index.html.erb

[code]

    <div class="wrap">
      <div class="item-1">
        1
      </div>
      <div class="item-2">
        2
      </div>
      <div class="item-3">
        3
      </div>
    </div>
    
    <div class="wrap">
      <div class="item-4">
        4
      </div>
      <div class="item-5">
        5
      </div>
      <div class="item-6">
        6
      </div>
    </div>
    
[/code]

![状況](https://i.stack.imgur.com/wSEwV.png)


CC BY-SA 3.0
2015-03-18T13:37:20.863
8077
2015-03-18T17:18:49.223
8475
question
css
CSS3で画面を６分割したい


CSSのパーセント指定では`position`が指定されている要素が基準となるため、各所に`position:relative;`などを追加する必要があります。


CC BY-SA 3.0
2015-03-18T13:42:27.693
8078
2015-03-18T13:42:27.693
5750
8077
answer


以下のスニペットで示すように [CSS Flexible
box](https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Flexible_boxes)
を活用すると、高さをヘッダーとフッターの高さを引いて2等分したのち、中身を3等分するCSSが書けます。

関連資料:
[かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技](http://www.webcreatorbox.com/tech/js-
to-css/)

[code]

    .stage {
      /* 画面全体を使うための指定 */
      position: fixed;
      top: 0;
      bottom: 0;
      width: 100%;
      /* 縦方向に4行を配置するための flex 指定 */
      display: flex;
      flex-direction: column;
    }
    
    .header {
      background: red;
      /* ヘッダーの高さを25pxで固定するための指定 */
      height: 25px;
      flex: none;
    }
    
    .footer {
      background: blue;
      /* フッターの高さを25pxで固定するための指定 */
      height: 25px;
      flex: none;
    }
    
    .row {
      /* ヘッダーとフッターを除く高さを、行で等分するための指定 */
      flex: 1 1 auto;
      /* 横に並べるための flex 指定 */
      display: flex;
      flex-direction: row;
    }
    
    .row > .item {
      /* 横に3つ、等間隔で並べるための flex 指定 */
      flex: 1 1 auto;
      /* 数字(コンテンツ)をセンタリングするための指定 */
      display: flex;
      justify-content: center;
      align-items: center;
      /* フォントを見やすくするための指定 */
      font-weight: bold;
      font-size: 24px;
    }
    
    /* 以下、各要素を色分けするための指定 */
    .row-1 > .item:nth-child(1) {
      background: #f99;
    }
    .row-1 > .item:nth-child(2) {
      background: #9f9;
    }
    .row-1 > .item:nth-child(3) {
      background: #99f;
    }
    .row-2 > .item:nth-child(1) {
      background: #c66;
    }
    .row-2 > .item:nth-child(2) {
      background: #6c6;
    }
    .row-2 > .item:nth-child(3) {
      background: #66c;
    }
[/code]

[code]

    <div class="stage">
      <div class="header"></div>
      <div class="row row-1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
      </div>
      <div class="row row-2">
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
      </div>
      <div class="footer"></div>
    </div>
[/code]


CC BY-SA 3.0
2015-03-18T17:18:49.223
8081
2015-03-18T17:18:49.223
208
8077
answer