我正在嘗試使用垂直滾動來實作布局。
假設我有這樣的事情：
灰色區域包含大量資訊（綠色矩形），因此其高度例如為 1000 像素。灰色區域是 svg。
然后我只需要可視化灰色區域的一小部分。這表示為黃色區域（例如高度 400 像素）。所以黃色矩形就像一個可見灰色區域的視窗。黃色容器包含一個藍色矩形，該矩形應始終位于黃色區域的底部。
這應該是用戶垂直滾動時的結果：
這是我的代碼：
.container {
border: 1px solid black;
}
.container-inner {
width: 300px;
background-color: #f3f8fc;
}
.container-content {
position: relative;
width: 100%;
height: 300px;
max-height: 300px;
overflow-y: auto;
border: 1px solid yellow;
background-color: lightyellow;
}
svg {
border: 1px solid gray;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
border: 1px solid skyblue;
background-color: paleturquoise;
}<div class="container">
<div class="container-inner">
<div class="container-content">
<svg x="0" y="0" width="300" height="1000">
<rect x="0" y="0" width="300" height="1000" fill="lightgray" />
<rect x="10" y="10" width="280" height="200" fill="green" fill-opacity="0.3" />
<rect x="10" y="220" width="280" height="100" fill="green" fill-opacity="0.3" />
<rect x="10" y="340" width="280" height="350" fill="green" fill-opacity="0.3" />
<rect x="10" y="700" width="280" height="290" fill="green" fill-opacity="0.3" />
</svg>
<div class="footer" />
</div>
</div>
</div>如您所見，它不像我預期的那樣作業：青色矩形隨著滾動而移動，而不是保留在黃色容器的底部。為什么？
有沒有更聰明的解決方案來做我需要的事情？
注意：灰色矩形中的內容必須是 svg。
uj5u.com熱心網友回復：
很近！position: sticky就將整理footer你！
.container {
border: 1px solid black;
}
.container-inner {
width: 300px;
background-color: #f3f8fc;
}
.container-content {
position: relative;
width: 100%;
height: 300px;
max-height: 300px;
overflow-y: auto;
border: 1px solid yellow;
background-color: lightyellow;
}
svg {
border: 1px solid gray;
}
.footer {
position: sticky;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
border: 1px solid skyblue;
background-color: paleturquoise;
}<div class="container">
<div class="container-inner">
<div class="container-content">
<svg x="0" y="0" width="300" height="1000">
<rect x="0" y="0" width="300" height="1000" fill="lightgray" />
<rect x="10" y="10" width="280" height="200" fill="green" fill-opacity="0.3" />
<rect x="10" y="220" width="280" height="100" fill="green" fill-opacity="0.3" />
<rect x="10" y="340" width="280" height="350" fill="green" fill-opacity="0.3" />
<rect x="10" y="700" width="280" height="290" fill="green" fill-opacity="0.3" />
</svg>
<div class="footer" />
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/526683.html
標籤：htmlcsssvg滚动