Position klebrig oben und unten Seitenlayout?

Gibt es eine Möglichkeit, this gist so zu aktualisieren, dass das <nav> Element an bottom:16px haftet, bis die <footer> es hochdrückt, wenn der Benutzer zum Ende der Seite scrollt?Position klebrig oben und unten Seitenlayout?

Ich versuche einen Weg zu finden, um die Unterseite des <nav> Elements 16px von der Spitze der Fußzeile (oder der Unterseite des Ansichtsfensters, wenn die Fußzeile außerhalb des Ansichtsfensters gescrollt ist) zu halten. Mit anderen Worten, ich möchte, dass sich das untere Ende des nav-Elements und der Fußzeile genau wie das obere Element des nav-Elements verhält und dass sich der Header in meinem Kern verhält.

Die max-height: calc(100vh - 50px - 16px - 16px); in meinem Geiste ist nur ein Workaround. Die maximale Höhe hängt davon ab, ob sich die Kopf- und/oder Fußzeile im Ansichtsfenster befinden.

Hier ein Screenshot, das zeigt, was ich bin versucht zu beheben: sollte

Das aktuelle Verhalten der Oberseite des <nav> Element erhalten bleiben. Es ist 16px von der Spitze der <header> (oder der obere Teil des Ansichtsfensters, wenn die Kopfzeile außerhalb des Ansichtsfensters ist).

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.page-header, .page-footer { 
 
    height: 50px; 
 
    background-color: #ccc; 
 
} 
 

 
.page-layout { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: flex-start; 
 
    margin: 16px 0; 
 
} 
 

 
.page-layout-nav, .page-layout-main, .page-layout-aside { 
 
    border: 1px dotted; 
 
} 
 

 
.page-layout-nav { 
 
    order: 0; 
 
    width: calc(25% - 16px); 
 
} 
 

 
.page-layout-main { 
 
    order: 1; 
 
    width: 50%; 
 
} 
 

 
.page-layout-aside { 
 
    order: 2; 
 
    width: calc(25% - 16px); 
 
} 
 

 
.page-layout-nav, .page-layout-aside { 
 
    position: sticky; 
 
    top: 16px; 
 
    bottom: 16px; 
 
    overflow: auto; 
 
    max-height: calc(100vh - 50px - 16px - 16px); /* not quite right... */ 
 
}

<header class="page-header"> 
 
    Contoso 
 
</header> 
 
<div class="page-layout"> 
 
    <main class="page-layout-main"> 
 
    <h1>Hello World</h1> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    <h2>Foo</h2> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    <h2>Bar</h2> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    <h2>Foo</h2> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    <h2>Bar</h2> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    </main> 
 

 
    <nav class="page-layout-nav"> 
 
    <ul> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
    </ul> 
 
    </nav> 
 

 
    <aside class="page-layout-aside"> 
 
    <h2>In this article</h2> 
 
    <ul> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
    </ul> 
 
    </aside> 
 
</div> 
 

 
<footer class="page-footer"> 
 
    foo bar baz 
 
</footer>

Quelle

2017-12-21 Jeremy Danyow

Sie müssen align-self:flex-end auf dieses Element verwenden, auf dem Boden zu ermöglichen kleben.

Updated gist

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.page-header, .page-footer { 
 
    height: 50px; 
 
    background-color: #ccc; 
 
} 
 

 
.page-layout { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    margin: 16px 0; 
 
} 
 

 
.page-layout-nav, .page-layout-main, .page-layout-aside { 
 
    border: 1px dotted; 
 
} 
 

 
.page-layout-nav { 
 
    order: 0; 
 
    width: calc(25% - 16px); 
 
    align-self: flex-end; 
 
} 
 

 
.page-layout-main { 
 
    order: 1; 
 
    width: 50%; 
 
} 
 

 
.page-layout-aside { 
 
    order: 2; 
 
    width: calc(25% - 16px); 
 
    align-self: flex-start; 
 
} 
 

 
.page-layout-nav, .page-layout-aside { 
 
    position: sticky; 
 
    top:16px; 
 
    bottom: 16px; 
 
    overflow: auto; 
 
    max-height: calc(100vh - 50px - 16px - 16px); /* not quite right... */ 
 
}

<header class="page-header"> 
 
    Contoso 
 
</header> 
 
<div class="page-layout"> 
 
    <main class="page-layout-main"> 
 
    <h1>Hello World</h1> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    <h2>Foo</h2> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    <h2>Bar</h2> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    <h2>Foo</h2> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    <h2>Bar</h2> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    </main> 
 

 
    <nav class="page-layout-nav"> 
 
    <ul> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
    </ul> 
 
    </nav> 
 

 
    <aside class="page-layout-aside"> 
 
    <h2>In this article</h2> 
 
    <ul> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
    </ul> 
 
    </aside> 
 
</div> 
 

 
<footer class="page-footer"> 
 
    foo bar baz 
 
</footer>

Quelle

2017-12-21 01:19:30

Danke für deine Antwort! Sieht vielversprechend aus - Ich habe meine Frage bearbeitet, um zu verdeutlichen, was ich versuche zu tun. Ich möchte die Unterseite des

@ JeremyDanyow ist nicht das, was im Snippet passiert? –

Ja - meine Schuld, ich habe meine Frage noch weiter geklärt. Entschuldigung! Ich möchte das aktuelle Verhalten des oberen '

Sie können einfach margin-top:auto zum nav hinzufügen:

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.page-header, .page-footer { 
 
    height: 50px; 
 
    background-color: #ccc; 
 
} 
 

 
.page-layout { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: flex-start; 
 
    margin: 16px 0; 
 
} 
 

 
.page-layout-nav, .page-layout-main, .page-layout-aside { 
 
    border: 1px dotted; 
 
} 
 

 
.page-layout-nav { 
 
    order: 0; 
 
    width: calc(25% - 16px); 
 
    margin-top:auto; 
 
} 
 

 
.page-layout-main { 
 
    order: 1; 
 
    width: 50%; 
 
} 
 

 
.page-layout-aside { 
 
    order: 2; 
 
    width: calc(25% - 16px); 
 
} 
 

 
.page-layout-nav, .page-layout-aside { 
 
    position: sticky; 
 
    top: 16px; 
 
    bottom: 16px; 
 
    overflow: auto; 
 
    max-height: calc(100vh - 50px - 16px - 16px); /* not quite right... */ 
 
}

<header class="page-header"> 
 
    Contoso 
 
</header> 
 
<div class="page-layout"> 
 
    <main class="page-layout-main"> 
 
    <h1>Hello World</h1> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    <h2>Foo</h2> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    <h2>Bar</h2> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    <h2>Foo</h2> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    <h2>Bar</h2> 
 
    <p>lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. lorem ipsum sumit dolar. </p> 
 
    </main> 
 

 
    <nav class="page-layout-nav"> 
 
    <ul> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
    </ul> 
 
    </nav> 
 

 
    <aside class="page-layout-aside"> 
 
    <h2>In this article</h2> 
 
    <ul> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
     <li><a href="#">foo</a></li> 
 
    </ul> 
 
    </aside> 
 
</div> 
 

 
<footer class="page-footer"> 
 
    foo bar baz 
 
</footer>

Quelle

2017-12-21 08:04:58

Danke für Ihre Antwort! Sieht vielversprechend aus - Ich habe meine Frage bearbeitet, um zu verdeutlichen, was ich versuche zu tun. Ich möchte die Unterseite des

@ JeremyDanyow ok, also müssen wir zuerst Ihre Problemumgehung entfernen und dann versuchen, eine Lösung zu finden? –

Position klebrig oben und unten Seitenlayout?

Antwort

Verwandte Themen