wake-up-neo.com

Wie erstelle ich eine feste Spalte in CSS mit CSS-Rasterlayout?

Ich habe eine einfache Site mit einem #container div erstellt, der zwei divs übergeordnet ist: #left und #right, indem Sie Grid Layout verwenden:

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

Ich bin mir bewusst, dass diese Frage bereits gelöst wurde, aber ich würde mich über eine Möglichkeit freuen, damit das Rasterlayout funktioniert.

Vielen Dank.

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>

10
MeLlamoPablo

Sie schrieben:

Gibt es eine Möglichkeit, die linke Spalte zu korrigieren?

Ich würde es zu schätzen wissen, wie es mit dem Rasterlayout funktioniert.

Wenn Sie möchten, dass das Element ein Rasterelement bleibt, lautet die Antwort "Nein".

Sobald ein Element position: absolute oder position: fixed ( das ist eine Form der absoluten Positionierung mit Bezug auf das Ansichtsfenster ) ist, nimmt es neue Eigenschaften an:

Aus der Spezifikation:

10. Absolut Positionierung

Ein absolut positioniertes untergeordnetes Element eines Gittercontainers ist außer Fluss und kein Rasterelement und beeinflusst daher nicht die Platzierung anderer Elemente oder die Größe des Gitters.

Ein Gitterelement funktioniert also nicht mit der absoluten Positionierung.

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

Erwägen Sie, Ihre #left- und #right-Elemente separat zu verwalten. #left kann ein Rastercontainer mit fester Position sein. #right kann ein anderer Gittercontainer sein und bleibt im Fluss.


Nebenbei haben Sie Ihren Rasterelementen eine prozentuale Auffüllung zugewiesen:

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

Wenn Sie margin und padding auf Rasterelemente (und Flexelemente) anwenden, sollten Sie möglichst keine prozentualen Einheiten verwenden. Browser können die Werte unterschiedlich berechnen.

11
Michael_B

Sie können dies erreichen, indem Sie diese CSS-Regeln zu Ihrer ID #left hinzufügen:

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 für klebrige Position: Sticky Position mit nichts außer CSS

sticky ist ein neuer Wert für die position -Eigenschaft, der als Teil von CSS3 Layout Module Spec hinzugefügt wird. Es verhält sich ähnlich wie bei der relativen Positionierung, da es nichts aus dem Dokumentenfluss entfernt. Mit anderen Worten, ein Sticky-Element hat keine Auswirkungen auf die Position benachbarter Elemente und bricht das übergeordnete Element nicht zusammen.

Ich hoffe es hilft dir

EDIT (korrigiertes Sprungverhalten)

Um zu vermeiden, dass der linke Teil am Ende der Seite hochspringt, fügen Sie der ID #left die folgende CSS-Regel hinzu:

box-sizing: border-box;

Siehe aktualisiertes Code-Snippet:

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>

22
kevin b.

Sie können nicht dafür sorgen, dass Links klebrig bleiben, aber Sie können dafür sorgen, dass der gesamte Inhalt klebrig bleibt. Dazu sollten Sie ein Sticky-Wrapper-Element erstellen und den gesamten Inhalt wie folgt darin platzieren:

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

So wird der gesamte Inhalt in der Haftverpackung nicht sabbern.

1
Lenin-Kerrigan

Fügen Sie im rechten Bedienfeld ein weiteres div hinzu, für das Sie einen Bildlauf durchführen möchten, und geben Sie max-height und overflow: auto;. Das linke Bedienfeld wird kleben und der Inhalt des rechten Bedienfelds wird angezeigt.

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

Sie können so etwas tun

hier ist die Geige

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;
}
0
Shingai Munyuki

Ich hatte ein bisschen das gleiche Problem. Ich brauchte ein festes Sidenav (Spalte 1) mit scrollbarem Inhalt (Spalte 2). So habe ich das Problem gelöst (beachten Sie, dass ich Stilkomponenten benutze, aber Sie können es sicherlich mit normaler CSS, Sass, weniger oder was auch immer tun):

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

Nun die css -Eigenschaft für jede dieser Stilkomponenten:

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

Es sieht so aus, aber auf meiner Seite etwas komplexer, da ich auch eine Kopf- und Fußzeile in meinem Raster habe und der Sidenav zusammenklappbar ist. Aber ich denke, das könnte für Sie funktionieren.

0

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

0
Özlem