我正在尝试制作 .menu-scroll
中的元素类是 <ul>
的一个 div列表在超过其高度限制时显示滚动条,在我的情况下,它只会不断向下推 .menu-footer
div 并在页面中造成巨大的问题。
body {
margin: 0;
padding: 0;
}
.grid {
display: grid;
grid-template-columns: 300px 100px auto 100px;
grid-template-rows: 50% 50%;
background-color: gray;
height: 100vh;
}
.grid>#menu {
display: grid;
background-color: blueviolet;
text-align: center;
font-size: 30px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2 end;
grid-template-rows: auto 75px;
}
.grid>#posts-wrapper {
display: grid;
background-color: gray;
text-align: center;
font-size: 30px;
grid-column-start: 3;
grid-column-end: 4;
grid-template-rows: 50px auto;
grid-template-columns: auto;
}
#posts {
background-color: white;
grid-row-start: 2;
grid-row-end: 3;
}
.menu-footer {
background-color: green;
}
.menu-scroll {
display: grid;
grid-template-rows: 100px auto;
}
.menu-scroll>.cover {
background-color: yellow;
}
.menu-scroll>.menu-list {
position: sticky;
overflow: scroll;
}
.list-item {
background-color: tomato;
padding: 10px 0px;
margin-top: 5px;
}
<div class="grid" id="container">
<div class="grid-item" id="menu">
<div class="menu-scroll">
<div class="cover">cover</div>
<div class="menu-list">
<ul style="list-style: none;">
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
</ul>
</div>
</div>
<div class="menu-footer">sticky footer</div>
</div>
<div class="grid" id="posts-wrapper">
<div id="posts">
posts
</div>
</div>
</div>
最佳答案
它的发生是因为在你的:
.menu-scroll {
display: grid;
grid-template-rows: 100px auto;
}
您设置了 auto
中除第一个元素之外的所有元素调整网格行。所以无论你添加多少元素到ul
, 在第二个元素中 <div class="menu-list">
, 它会一直增长。
您需要将其设置为在第二个元素上具有明确的高度。
像这样:
.menu-scroll {
display: grid;
grid-template-rows: 100px 300px auto;
}
body {
margin: 0;
padding: 0;
}
.grid {
display: grid;
grid-template-columns: 300px 100px auto 100px;
grid-template-rows: 50% 50%;
background-color: gray;
height: 100vh;
}
.grid>#menu {
display: grid;
background-color: blueviolet;
text-align: center;
font-size: 30px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2 end;
grid-template-rows: auto 75px;
}
.grid>#posts-wrapper {
display: grid;
background-color: gray;
text-align: center;
font-size: 30px;
grid-column-start: 3;
grid-column-end: 4;
grid-template-rows: 50px auto;
grid-template-columns: auto;
}
#posts {
background-color: white;
grid-row-start: 2;
grid-row-end: 3;
}
.menu-footer {
background-color: green;
}
.menu-scroll {
display: grid;
grid-template-rows: 100px 300px auto;
}
.menu-scroll>.cover {
background-color: yellow;
}
.menu-scroll>.menu-list {
position: sticky;
overflow: scroll;
}
.list-item {
background-color: tomato;
padding: 10px 0px;
margin-top: 5px;
}
<div class="grid" id="container">
<div class="grid-item" id="menu">
<div class="menu-scroll">
<div class="cover">cover</div>
<div class="menu-list">
<ul style="list-style: none;">
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
<li class="list-item">menu item</li>
</ul>
</div>
</div>
<div class="menu-footer">sticky footer</div>
</div>
<div class="grid" id="posts-wrapper">
<div id="posts">
posts
</div>
</div>
</div>
关于html - 如何修复溢出-y : scroll not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58921234/