1

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

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

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

ご教授願います。

application.html.erb

<header class="navbar navbar-fixed-top" role="nav">
</header>

<div class="my-container">
  <%= yield %>
</div>

<footer class="navbar navbar-fixed-bottom" role="nav">
</footer>

css

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;
    }
  }
}

index.html.erb

<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>

状況

2 件の回答 2

2

以下のスニペットで示すように CSS Flexible box を活用すると、高さをヘッダーとフッターの高さを引いて2等分したのち、中身を3等分するCSSが書けます。

関連資料: かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

.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;
}
<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>

1

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。