gpt4 book ai didi

CSS Sticky - 如何粘在一边以填充可用高度?

转载 作者:行者123 更新时间:2023-12-04 09:15:28 25 4
gpt4 key购买 nike

我想创建网格布局,我想搁置以坚持 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>

关于CSS Sticky - 如何粘在一边以填充可用高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63245004/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com