web-dev-qa-db-ja.com

CSSグリッドレイアウトの各列にスクロールを追加

グリッドレイアウトの各列を個別にスクロールしたい。

現在、モバイル専用のWebアプリケーションを開発しています。縦向きと横向きに異なるグリッドレイアウトを使用したい。

縦向きは1列だけで、すべての要素が次々に並んでいます。ここで問題ありません。

横向きでは2列を使用します。コンテンツ全体が左側に表示され、ナビゲーションが右側に移動します。今、私は両方の部分に別々のスクロールを持たせたいです。これを実装する方法はありますか？また、現在の列のコンテンツが終了すると、スクロールが停止します。

CodePenのコード： https://codepen.io/SuddenlyRust/pen/rmJOqV

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 15px 0;
}

header {
  background-color: green;
  grid-column: 1;
  grid-row: 1
}

main {
  background-color: blue;
  grid-column: 1;
  grid-row: 2;
}

nav {
  background-color: pink;
  grid-column: 1;
  grid-row: 3;
}

footer {
  background-color: teal;
  grid-column: 1;
  grid-row: 4;
}

@media only screen and (orientation: landscape) {
  .grid-container {
    grid-template-columns: 5fr 4fr;
  }
  nav {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  footer {
    grid-row: 3;
  }
}

h1 {
  min-height: 200px;
}
<div class="grid-container">
  <header>
    <h1>Logo</h1>
  </header>
  <main>
    <h1>content</h1>
  </main>
  <nav>
    <h1>Navigation</h1>
  </nav>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

お時間をいただきありがとうございます！

htmlcssflexboxcss-grid
7
SuddenlyRust

横向きで2列使用したいと思います。コンテンツ全体が左側に表示され、ナビゲーションが右側に移動します。今、私は両方の部分に別々のスクロールを持たせたいです。これを実装する方法はありますか？また、現在の列のコンテンツが終了すると、スクロールが停止します。

左側の列には、header、main、footerの3つのグリッド項目があります。

右側の列には、nav要素という1つのグリッド項目があります。

垂直または水平のスクロールバーを左の列に追加することは、3つの個別の要素があるため実行できません。単一のスクロールバーを機能させるには、コンテナ内のすべての要素をラップする必要があります。

要素が1つしかないため、垂直または水平のスクロールバーを右側の列に追加するのは簡単です。

垂直スクロールバーについて話していると仮定して、それを機能させる1つの方法を次に示します。

body {
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-gap: 15px 0;
  height: 100vh;
}

header {
  background-color: green;
  grid-column: 1;
  grid-row: 1
}

main {
  background-color: blue;
  grid-column: 1;
  grid-row: 2;
}

nav {
  background-color: pink;
  grid-column: 1;
  grid-row: 3;
  overflow: auto;
}

footer {
  background-color: teal;
  grid-column: 1;
  grid-row: 4;
}

@media only screen and (orientation: landscape) {
  .grid-container {
    grid-template-columns: 5fr 4fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  nav {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
  footer {
    grid-row: 3;
  }
}
<div class="grid-container">
  <header>
    <h1>Logo</h1>
  </header>
  <main>
    <h1>content</h1>
  </main>
  <nav>
    <h1>Navigation<br><br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br>nav item<br></h1>
  </nav>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

改訂されたcodepen

CSSグリッドのブラウザーサポート

  • Chrome-2017年3月8日現在、完全サポート（バージョン57）
  • Firefox-2017年3月6日時点で完全にサポート（バージョン52）
  • Safari-2017年3月26日時点で完全にサポート（バージョン10.1）
  • Edge-2017年10月16日現在、完全サポート（バージョン16）
  • IE11-現在の仕様はサポートされていません。廃止されたバージョンをサポート

これが全体像です： http://caniuse.com/#search=grid

8
Michael_B

以前の質問に対する私の回答 からの拡張バージョンは、flexboxを使用してヘッダー/コンテンツ/メインとナビゲーションの両方のスクロールを取得する方法です。

フィドルデモ

スタックスニペット

(function(d, timeout) {
  window.addEventListener("load", function() {
    resizeHandler();
  }, false);

  window.addEventListener("resize", function() {
    if (!timeout) {
      timeout = setTimeout(function() {
        timeout = null;
        // do resize stuff
        resizeHandler();
      }, 66);
    }
  }, false);

  function resizeHandler() {
    if (window.innerHeight < window.innerWidth) {
      if (!(d.body.classList.contains('landscape'))) {
        d.body.classList.add('landscape');
        d.body.appendChild(d.querySelector('nav'));
      }
    } else {
      if (d.body.classList.contains('landscape')) {
        d.body.classList.remove('landscape')
        d.querySelector('section').appendChild(d.querySelector('nav'));
      }
    }
  }
}(document));
html, body {
  margin:0;
}
header, footer, main, nav {
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  min-height: 120px;
  border: 1px solid #eebb55;
  background: #ffeebb;
}
footer {
  order: 2;
}
nav {
  order: 1;
}
section {
  display: flex;
  flex-direction: column;
}

@media only screen and (orientation: landscape) {

  main div {
    height: 400px;
    border: 1px dashed red;
  }
  nav div {
    height: 800px;
    border: 1px dashed red;
  }

  body.landscape {
    display: flex;
  }
  section {
    display: block;
    width: calc(60% - 10px);         /*  10px is for the margin  */
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    overflow: auto;
  }
  nav {
    width: calc(40% - 10px);         /*  10px is for the margin  */
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    overflow: auto;
  }
}
<section>
  <header>header</header>
  <main>content
    <div>
      This div get a height when in landscape to show scroll in section
    </div>
  </main>
  <footer>footer</footer>
  <nav>navigation
    <div>
      This div get a height when in landscape to show scroll in nav
    </div>
  </nav>
</section>
3
LGSon