web-dev-qa-db-ja.com

CSSグリッドレイアウトを使用してCSSで固定列を作成する方法は？

Grid Layout を使用して、2つのdiv：#containerと#leftの親である#right divを使用して簡単なサイトを作成しました。

左の列を修正する方法はありますか？左のテキストをその位置に保持し、右のテキストを現在のままスクロールできるようにしたいと思います。 position: fixedを#leftに追加すると、レイアウトが壊れます。

この質問はすでに解決されていることは承知していますが、グリッドレイアウトで動作させる方法を評価したいと思います。

ありがとう。

body {
  margin: 0 0 0 0;
}

#container {
  display: grid;
  grid-template-columns: 50% 50%;
}

.section {
  padding: 5% 5% 5% 5%;
}

#left {
  background-color: aquamarine;
}

#right {
  background-color: beige;
}
<div id="container">
  <div id="left" class="section">
    <p>This should not scroll</p>
  </div>
  <div id="right" class="section">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consectetur purus nec volutpat. Donec vel libero nec est commodo facilisis vel et nisl. Praesent porta sed eros eu porta. Cras dolor nulla, ullamcorper et tincidunt quis, porta ut
      tellus. Maecenas cursus libero sed accumsan luctus. Integer sed consequat ante. Morbi sit amet lectus tempor elit tempor cursus ut sed enim. Donec placerat bibendum volutpat.
    </p>
    <p>
      Nunc sit amet eleifend sapien, sed tincidunt neque. Donec id sapien et nunc scelerisque iaculis dignissim nec mauris. Fusce at pretium nulla. Maecenas vel rutrum tellus, a viverra nunc. Aenean at arcu vitae dui faucibus dapibus. Vivamus hendrerit blandit
      mollis. Aenean sit amet lectus a metus faucibus condimentum. Proin vel eros ut elit pharetra lacinia vitae eu orci. Etiam massa massa, aliquam at pulvinar ut, porttitor eu mauris. Ut in iaculis sapien.
    </p>
    <p>
      In vitae rhoncus arcu. Maecenas elementum nunc quis magna finibus, vitae imperdiet diam pulvinar. Phasellus sit amet nibh eu massa facilisis luctus. Nulla ullamcorper sodales ante id vestibulum. Fusce felis nisi, lacinia sit amet mauris vel, euismod suscipit
      neque. Mauris quis libero eget enim facilisis pharetra. Fusce non ligula auctor nunc pretium dignissim eget eget turpis. Nam ultricies dolor ac libero maximus vestibulum. Mauris et tortor vitae nisi ultrices vestibulum ac id mauris. Proin interdum
      dapibus sollicitudin. Phasellus ultricies vulputate sem id hendrerit. Cras eget posuere nunc, in placerat velit. Pellentesque sed ante at elit ornare efficitur. Donec sed condimentum nisl. Curabitur dapibus leo id ligula dignissim pharetra.
    </p>
  </div>
</div>
htmlcsscss3grid-layoutcss-grid
16
MeLlamoPablo

あなたが書いた：

左の列を修正する方法はありますか？

グリッドレイアウトで動作させる方法をいただければ幸いです。

要素をグリッドアイテムのままにする場合、答えは「いいえ」です。

要素にposition: absoluteまたはposition: fixed（ これは絶対位置の形式であり、ビューポートを参照 ）があれば、新しい特性を取ります：

  • 要素はドキュメントフローから削除されます
  • 要素が grid formating context から削除されます
  • 要素はグリッド項目ではなくなりました

仕様から：

10。絶対位置設定

グリッドコンテナの絶対位置の子は、グリッドアイテムではなくフロー外にあるため、他のアイテムの配置やグリッドのサイズ設定には影響しません。

したがって、grid itemは絶対配置ではうまく機能しません。

ただし、position: fixedをgrid containerに適用しても問題はありません。

#left要素と#right要素を別々に管理することを検討してください。 #leftは、固定位置のグリッドコンテナにすることができます。 #rightは別のグリッドコンテナにでき、インフローのままにできます。

また、余談ですが、グリッドアイテムにパーセントベースのパディングを指定しました。

.section {
    padding: 5% 5% 5% 5%;
}

marginおよびpaddingをグリッドアイテム（およびフレックスアイテム）に適用する場合は、パーセント単位から離れることをお勧めします。ブラウザは値を異なる方法で計算する場合があります。

13
Michael_B

これらのCSSルールをID #leftに追加することでこれを実現できます。

position: sticky; // See link
top: 0; //to make it stick to the top of the screen
height: 100vh; // make the height equal to 100 view height

スティッキー位置のリンク： CSSのみのあるスティッキー位置

stickyは、CSS3 Layout Module Specの一部として追加されたpositionプロパティの新しい値です。ドキュメントフローから何も削除しないという点で、相対的な配置と同様に機能します。つまり、スティッキー要素は、隣接する要素の位置には影響せず、親要素を折りたたむことはありません。

それがあなたを助けることを願っています

編集（ジャンプの動作を修正）

ページの最後で左の部分が跳ね上がるのを避けるために、ID #leftに次のCSSルールを追加します。

box-sizing: border-box;

更新されたコードスニペットをご覧ください。

body {
    margin: 0 0 0 0;
}

#container {
    display: grid;
    grid-template-columns: 50% 50%;
}

.section {
    padding: 5% 5% 5% 5%;
}

#left {
    background-color: aquamarine;
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
}

#right {
    background-color: beige;
}
  
<div id="container">
    <div id="left" class="section">
        <p>This should not scroll</p>
    </div>
    <div id="right" class="section">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consectetur purus nec volutpat. Donec vel libero nec est commodo facilisis vel et nisl. Praesent porta sed eros eu porta. Cras dolor nulla, ullamcorper et tincidunt quis, porta ut tellus. Maecenas cursus libero sed accumsan luctus. Integer sed consequat ante. Morbi sit amet lectus tempor elit tempor cursus ut sed enim. Donec placerat bibendum volutpat.
        </p>
        <p>
            Nunc sit amet eleifend sapien, sed tincidunt neque. Donec id sapien et nunc scelerisque iaculis dignissim nec mauris. Fusce at pretium nulla. Maecenas vel rutrum tellus, a viverra nunc. Aenean at arcu vitae dui faucibus dapibus. Vivamus hendrerit blandit mollis. Aenean sit amet lectus a metus faucibus condimentum. Proin vel eros ut elit pharetra lacinia vitae eu orci. Etiam massa massa, aliquam at pulvinar ut, porttitor eu mauris. Ut in iaculis sapien.
        </p>
        <p>
            In vitae rhoncus arcu. Maecenas elementum nunc quis magna finibus, vitae imperdiet diam pulvinar. Phasellus sit amet nibh eu massa facilisis luctus. Nulla ullamcorper sodales ante id vestibulum. Fusce felis nisi, lacinia sit amet mauris vel, euismod suscipit neque. Mauris quis libero eget enim facilisis pharetra. Fusce non ligula auctor nunc pretium dignissim eget eget turpis. Nam ultricies dolor ac libero maximus vestibulum. Mauris et tortor vitae nisi ultrices vestibulum ac id mauris. Proin interdum dapibus sollicitudin. Phasellus ultricies vulputate sem id hendrerit. Cras eget posuere nunc, in placerat velit. Pellentesque sed ante at elit ornare efficitur. Donec sed condimentum nisl. Curabitur dapibus leo id ligula dignissim pharetra.
        </p>
    </div>
</div>
34
kevin b.

このようなことができます

これが fiddle です

ここにコードがあります

body {
    margin: 0 0 0 0;
}

#container {
    display: grid;

}

.section {
    padding: 5% 5% 5% 5%;
}

#left {
    background-color: aquamarine;
    height: 100%;
    position: fixed;
    width: 50%
}

#right {
    background-color: beige;
    overflow: scroll;
    width: 50%;
    right: 0;
    position: absolute;
}
1
Shingai Munyuki

左をスティッキーにすることはできませんが、その中のすべてのコンテンツをスティッキーにすることができます。このためには、次のようにスティッキーラッパー要素を作成し、その中にすべてのコンテンツを配置する必要があります。

HTML：

<div class="grid">

    <div class="left">
       <div class="sticky_wrapper">Content</div>
    </div>

    <div class="right">
        Content
    </div>

</div>

CSS：

.grid { display: grid; grid-template-columns: 50% 50%; }
.left { background-color: aquamarine; }
.right { background-color: beige; }
.sticky_wrapper { position: sticky; top: 0; }

そのため、スティッキーラッパーのすべてのコンテンツはスクロールしません。

1
Lenin-Kerrigan

スクロールするパネルを右パネルにもう1つdivを追加し、_max-heightおよびoverflow: auto;そのため、左パネルは固定され、右パネルのコンテンツはスクロールします。

body {
    margin: 0 0 0 0;
}

#container {
    display: grid;
    grid-template-columns: 50% 50%;
}

.section {
    padding: 5% 5% 5% 5%;
}

#left {
    background-color: aquamarine;
}

#right {
    background-color: beige;
}
.scroll-div {
    max-height: 300px;
    overflow: auto;
}
<div id="container">
    <div id="left" class="section">
        <p>This should not scroll</p>
    </div>
    <div id="right" class="section">
        <div class="scroll-div">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consectetur purus nec volutpat. Donec vel libero nec est commodo facilisis vel et nisl. Praesent porta sed eros eu porta. Cras dolor nulla, ullamcorper et tincidunt quis, porta ut tellus. Maecenas cursus libero sed accumsan luctus. Integer sed consequat ante. Morbi sit amet lectus tempor elit tempor cursus ut sed enim. Donec placerat bibendum volutpat.
        </p>
        <p>
            Nunc sit amet eleifend sapien, sed tincidunt neque. Donec id sapien et nunc scelerisque iaculis dignissim nec mauris. Fusce at pretium nulla. Maecenas vel rutrum tellus, a viverra nunc. Aenean at arcu vitae dui faucibus dapibus. Vivamus hendrerit blandit mollis. Aenean sit amet lectus a metus faucibus condimentum. Proin vel eros ut elit pharetra lacinia vitae eu orci. Etiam massa massa, aliquam at pulvinar ut, porttitor eu mauris. Ut in iaculis sapien.
        </p>
        <p>
            In vitae rhoncus arcu. Maecenas elementum nunc quis magna finibus, vitae imperdiet diam pulvinar. Phasellus sit amet nibh eu massa facilisis luctus. Nulla ullamcorper sodales ante id vestibulum. Fusce felis nisi, lacinia sit amet mauris vel, euismod suscipit neque. Mauris quis libero eget enim facilisis pharetra. Fusce non ligula auctor nunc pretium dignissim eget eget turpis. Nam ultricies dolor ac libero maximus vestibulum. Mauris et tortor vitae nisi ultrices vestibulum ac id mauris. Proin interdum dapibus sollicitudin. Phasellus ultricies vulputate sem id hendrerit. Cras eget posuere nunc, in placerat velit. Pellentesque sed ante at elit ornare efficitur. Donec sed condimentum nisl. Curabitur dapibus leo id ligula dignissim pharetra.
        </p>
    </div>
    </div>
</div>
0
Venu Madhav

同じ問題が少しありました。スクロール可能なコンテンツ（col 2）を持つ固定sidenav（col 1）が必要でした。ここで私が問題を解決した方法を示します（styled-componentを使用していますが、通常のcss、sass、less、その他何でも確実に実行できます）。

<Grid>
  <SideNav>
    <Sider>
  </SideNav>
  <Content />
<Grid>

これらのスタイル付きコンポーネントのそれぞれのcssプロパティ：

const Grid = styled.div`
  position: relative;
  display: grid;
  height: 100%;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'sidenav content';
`

const Sidenav = styled.div`
  position: relative;
  grid-area: sidenav;
`
const Content = styled.div`
  position: relative;
  grid-area: content;
  width: 100%;
`

const Sider = styled.aside`
  position: fixed;
  height: 100vh;
`

このように見えますが、グリッドにヘッダーとフッターもあり、サイドナブは折りたたみ可能であるため、もう少し複雑です。しかし、これはあなたのために働くと思います。

0
Alexandre Cadieux

これを試して：

body {
    margin: 0 0 0 0;
}

#container {
    display: grid;
    grid-template-columns: 50% 50%;
}

.section {
    padding: 5% 5% 5% 5%;
}

#left {
    background-color: aquamarine;

    p {
      position: fixed;
    }
}

#right {
    background-color: beige;
}

https://jsfiddle.net/km5gdrcm/3/

0
Özlem