Wie erstellt man eine feste Spalte in CSS mit CSS Grid Layout?

Question

Ich habe eine einfache Website mit einem #container div gemacht, die Eltern zu zwei divs ist: #left und #right, durch Grid Layout mit:

Gibt es eine Möglichkeit die linke Spalte fixiert zu machen? Ich möchte, dass der linke Text auf seiner Position bleibt und der rechte Text so wie er jetzt scrollbar ist. Hinzufügen position: fixed zu #left bricht das Layout.

Ich bin mir bewusst, dass diese Frage bereits gelöst wurde, aber ich würde eine Möglichkeit, es mit dem Grid-Layout arbeiten zu schätzen wissen.

Danke.

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>

Answer 1

Sie schrieb:

Gibt es eine Möglichkeit die linke Spalte fixiert zu machen?

Ich würde mich über eine Möglichkeit freuen, damit es mit dem Grid-Layout funktioniert.

Wenn das Element ein Rasterelement bleiben soll, lautet die Antwort "nein".

Sobald ein Element hat position: absolute oder position: fixed (which is a form of absolute positioning, with reference to the viewport), nimmt es auf neue Merkmale:

• das Element aus dem Dokument
• entfernt wird, fließt das Element aus dem
grid formatting context entfernt wird, das Element ist kein Gitterartikel mehr

Aus der Spezifikation:

10. Absolute Positioning

Ein absolut positionierten Kind eines Gitterbehälter ist out-of-flow und kein Gitterpunkt, und so nicht die Platzierung von anderen Elementen nicht beeinträchtigt oder die Dimensionierung der Gitter.

So ein Rasterelement funktioniert nicht gut mit absoluter Positionierung.

Sie haben jedoch kein Problem position: fixed auf einen Gittercontainer anzuwenden.

Sie können Ihre Elemente #left und #right getrennt verwalten. #left kann ein stationärer Gittercontainer sein. #right kann ein weiterer Gittercontainer sein und im Fluss bleiben.

---

Auch als beiseite, können Sie Ihre Rasterelemente Prozentbasis Polsterung gegeben haben:

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

Wenn margin und padding auf Rasterelemente (und flex Artikel) Anwendung, ist es am besten zu bleiben weg von Prozenteinheiten. Browser können die Werte unterschiedlich berechnen.

• Percentage padding on grid item being ignored in Firefox
• Why doesn't percentage padding work on flex items in Firefox?

Answer 2

du #left durch das Hinzufügen dieser CSS-Regeln zu Ihrer ID erreichen können:

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 

Link for sticky Position: Sticky position with nothing but CSS

klebrig ist ein Neuer Wert für die position -Eigenschaft, der als Teil des CSS3-Layout-Moduls hinzugefügt wurde Spez. Es verhält sich ähnlich wie die relative Positionierung, da es nichts aus dem Dokumentenfluss entfernt. Mit anderen Worten, ein klebriges Element hat keine Auswirkung auf die Position benachbarter Elemente und kollabiert sein Elternelement nicht.

Hoffnung, es hilft Ihnen

EDIT (fix jumpy Verhalten)

Um den linken Teil zu vermeiden, am Ende der Seite zu springen, fügen Sie einfach die folgende CSS-Regel Ihre ID #left:

box-sizing: border-box; 

aktualisiert Codeausschnitt Siehe:

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>

Answer 3

Sie können

hier so etwas tun, ist die fiddle

Hier ist der Code

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

Answer 4

versuchen Sie dies:

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/

Answer 5

ein weiteres div in rechten Feld hinzufügen, das Panel Sie, dass blättern wollen einige max-height und overflow: auto; so linke Tafel kleben und rechten Feld Inhalt scrollt wird geben.

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>