CSS Sticky - 如何粘在一边以填充可用高度?
CSS Sticky - How to sticky aside to fill available height?
我想创建网格布局,我想放在一边粘在 top: 0
上并填充所有剩余的高度,例如100% 的高度,当我向下滚动时,我需要将高度更改为 100% 减去页脚高度。不用JS也能搞定?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-areas: "aside content"
"footer footer";
grid-template-columns: 20rem 1fr;
}
aside {
grid-area: aside;
background-color: red;
}
nav {
font-size: 2rem;
color: black;
position: sticky;
top: 0;
height: 100%;
background-color: yellow;
}
main {
grid-area: content;
background-color: green;
height: 150vh;
}
footer {
grid-area: footer;
background-color: blue;
height: 10rem;
}
ul {
list-style: none;
}
<div class="grid">
<aside>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav></aside>
<main>Content</main>
<footer>Footer</footer>
</div>
将height:100%
替换为min-height:100vh
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-areas: "aside content"
"footer footer";
grid-template-columns: 20rem 1fr;
}
aside {
grid-area: aside;
background-color: red;
}
nav {
font-size: 2rem;
color: black;
position: sticky;
top: 0;
min-height:100vh;
background-color: yellow;
}
main {
grid-area: content;
background-color: green;
height: 150vh;
}
footer {
grid-area: footer;
background-color: blue;
height: 10rem;
}
ul {
list-style: none;
}
<div class="grid">
<aside>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav></aside>
<main>Content</main>
<footer>Footer</footer>
</div>
我想创建网格布局,我想放在一边粘在 top: 0
上并填充所有剩余的高度,例如100% 的高度,当我向下滚动时,我需要将高度更改为 100% 减去页脚高度。不用JS也能搞定?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-areas: "aside content"
"footer footer";
grid-template-columns: 20rem 1fr;
}
aside {
grid-area: aside;
background-color: red;
}
nav {
font-size: 2rem;
color: black;
position: sticky;
top: 0;
height: 100%;
background-color: yellow;
}
main {
grid-area: content;
background-color: green;
height: 150vh;
}
footer {
grid-area: footer;
background-color: blue;
height: 10rem;
}
ul {
list-style: none;
}
<div class="grid">
<aside>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav></aside>
<main>Content</main>
<footer>Footer</footer>
</div>
将height:100%
替换为min-height:100vh
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-areas: "aside content"
"footer footer";
grid-template-columns: 20rem 1fr;
}
aside {
grid-area: aside;
background-color: red;
}
nav {
font-size: 2rem;
color: black;
position: sticky;
top: 0;
min-height:100vh;
background-color: yellow;
}
main {
grid-area: content;
background-color: green;
height: 150vh;
}
footer {
grid-area: footer;
background-color: blue;
height: 10rem;
}
ul {
list-style: none;
}
<div class="grid">
<aside>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav></aside>
<main>Content</main>
<footer>Footer</footer>
</div>