CSSグリッドレイアウトを使用して、スティッキーヘッダーとフッターを持つコンテンツのスクロールバーを取得するにはどうすればよいですか？

debugcn 投稿 Dev

週

以下は明らかに新人のCSSグリッドの質問ですが、CSSグリッドで固定のヘッダーとフッターを作成し、動的に生成された<section>要素をそれぞれ固定数の他のコンテンツ要素を持つスクロール可能なメインコンテンツ領域を作成するにはどうすればよいですか？私はペンを持って、ここでミディアムポストとからペンのフォークです、ここを。

私が解決しようとしている問題は、インターネットで見つけることができる通常のCSSグリッド投稿よりも少し複雑です-CSSの経験がほとんどない人にとっては十分です。

私が経験する複雑さは、メインコンテンツ領域の各セクションが0との間4（または他の[min, max]範囲）の要素を保持できることです。私が試してきたアイデアは、各セクションのem高さが特定の単位であり、所定のスペース（em単位）が各セクションの要素数の間で垂直に分割されているか、各要素のサイズが固定されているem（おそらくより良い）というものです。。セクションの総数は制限されていないため、すべてのセクションにまたがるメインコンテンツ領域のスクロールバーです。

リンクされたペンではSection 1、でこれを実行しようとしますが、ご覧のとおり、良い結果は得られません。最初のセクションの内容は、コンテナから次のセクションにオーバーフローします。これをいじってCSSの「魔法数」を調整することもできるかもしれませんが、これをもう少し動的にする方法を考えておくとよいでしょう。

HTMLは次のようになります

<body>
  <main class="grid">
  <div id="header">header</div>
  <div id="bar">bar</div>
  <div id="sidebar">sidebar</div>  
  <div id="content">
<section>
  <header>
    <h2>Section 1</h2>
    <a href="#">show all</a>
  </header>
  <ul>
    <li>Section 1, item 1.</li>
    <li>Section 1, item 2.</li>
    <li>Section 1, item 3.</li>
    <li>Section 1, item 4.</li>
  </ul>
</section>
<section>
  <header>
    <h2>Section 2</h2>
    <a href="#">show all</a>
  </header>
  <ul>
    <li>Section 1, item 1.</li>
    <li>Section 2, item 2.</li>
    <li>Section 3, item 3.</li>
  </ul>
</section>
<section id="unroll">      
   <button>show all in all sections</button>
</section>    
<button id="toggle-sidebar"><</button>
<footer>
   <p>This is a footer</p>
<footer>
</main>

これを解決しようとしている間、実際には別の問題が発生しました。元のペンでは、サイドバーを切り替えてメインコンテンツ領域にフローさせることができます。今私が持っているものをこれをいじくりまわすと、私はもうそれをすることができないようで、何が問題なのか、そしてそれをどのように解決するのかわかりません。

したがって、グリッドレイアウトの2つの関連する問題：

エリアにそれぞれ0から4の要素を持つセクションがいくつかある場合に、ある高さのメインコンテンツエリアをスクロールする方法。セクションの垂直方向のサイズを固定したり、個々の要素のサイズを固定したりできます。
ペンウィンドウのサイズを変更すると、左側から「白い漏れ」が発生します。それは一般的なトグルの問題を抱えている何かを持っています。
トグルメニューを元に戻す方法は？言い換えれば、私がここで見落としている問題は何ですか？:)

Itamar

ここに何も残していないと仮定します。

コンテンツ領域をスクロールします：

追加するだけです

height:200px; /*whatever height fits you*/
overflow-y:auto;

overflow-y 垂直スクロールバーを制御します。

ホワイトリーク

あなたのペンでは起こりませんが、2K画面でwidthは、メインビューに追加して設定100vwします-vwはビュー幅を表します。

私のボタンはどこにありますか？

さて、それはあなたが使用しtransform:scale(0);たので隠されています、それは基本的にそれをサイズなしに設定しました:)。

これが「修正済み」バージョンですhttps://codepen.io/itamarshdev/pen/RBBgxY

私が何かを逃した場合は、コメントしてください、そして私は返信するために最善を尽くします:)

更新：

あなたのコメントによると：

ペン：https：//codepen.io/itamarshdev/pen/RBBZbd

スクロール可能なコンテンツ-追加：

#content {
   grid-area: content;
   height: auto;
   overflow-y: auto;
   max-height: 100vh;
}

セクションがあふれています！

さてあなたの数学は間違っていました：

#content section ul {
  min-height: 5em;
  max-height: 20em;
}
#content section ul li {
  min-height: 5em;
  max-height: 5em;
}

section ul li {
   list-style: none;   
   background-color:#ff00ff;
   margin:0.5em;
}

見る。5 * 4em = 20em。

ただし、各要素の周囲に0.5emのマージンがあります。これは、6 * 0.5em（要素間）+ 1em（上部と下部）= 4emを意味します

だから24emでいい！

#content section ul {
   min-height: 5em;
   max-height: 24em;
}

ペン：https：//codepen.io/itamarshdev/pen/RBBgxY

サイドバーの切り替え

モバイルビューで動作します（ただし、正しい側ではありません）

フッター

フッターに期待される動作は何ですか？フッターを維持するには？;）ここに行きます：変更

@media (max-width: 640px) {
  body{
    grid-template-areas: 'header header' 'content content' 'footer footer';
  }
 ...

に

@media (max-width: 640px) {
  .grid {
    grid-template-areas: 'header header' 'content content' 'footer footer';
  }
...

また、フッターをグリッドに追加することをお勧めします:)

「ノーマルビュー」にも

grid-template-areas: "header header" "sidebar content" 'footer footer';

そして追加

footer {
   grid-area: footer;
}

ペン：https：//codepen.io/itamarshdev/pen/RBBZbd

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-5

コメントを追加

サインイン

Related 関連記事

記事