我有一個網格父級，有 2 個列。左孩子的高度與父母相同（這里是 100vh），右孩子是 1000px，比父母大。
HTML：
<body>
<div class="leftcol"></div>
<div class="rightcol"></div>
</body>
CSS：
body{
background-color: white;
display: grid;
grid-template-columns: 2fr 3fr;
margin: 0;
overflow: hidden;
}
.leftcol{
background-color: grey;
height: 100vh;
width: 100%;
}
.rightcol{
background-color: black;
height: 1000px;
width: 100%;
overflow: auto;
}
我只希望右孩子是可滾動的，因為它的高度大于父母，左孩子將保持靜止。我讀過其他一些帖子，他們建議在孩子上使用overflow: auto但我的不起作用。誰能告訴我我在這里做錯了什么？謝謝你。
uj5u.com熱心網友回復：
沒有滾動條，因為您不需要滾動。如果你想顯示一個滾動條，你可以overflow: auto;用overflow: visible;. 這使它無論如何都顯示滾動條。
您可以在此處了解有關溢位的更多資訊：https : //developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content
uj5u.com熱心網友回復：
嘗試一下
<body>
<div class="leftcol">
<p class="top">top</p>
<p class="bottom">bottom</p>
</div>
<div class="rightcol">
<p class="top">top</p>
<p class="bottom">bottom</p>
</div>
</body>
<style type="text/css">
body{
background-color: white;
display: grid;
grid-template-columns: 2fr 3fr;
margin: 0;
}
.leftcol{
background-color: grey;
height: 100vh;
width: 50%;
position: fixed;
left: 0;
top: 0;
}
.rightcol{
background-color: black;
height: 1000px;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
.leftcol p,
.rightcol p {
text-align: center;
color: #fff;
}
.rightcol p.top {
top: 0;
}
.rightcol p.bottom {
bottom: 0;
padding-top: 900px;
}
.leftcol p.bottom {
padding-top: 80vh;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/328450.html