如何使div具有溢出y滾動響應（高度）？
[英]How to make a div with overflow y scroll responsive (height wise)?
問題描述
所需的結果是
第二個div內的div始終應具有
overflow-y scroll。底部的按鈕應始終固定在窗口底部
即使調整大小，該結構也應保持響應狀態。
我願意使用引導程序或解決此問題的方法
.border { border: 1px solid }
<div class="border" style="height: 79px;"> </div> <div class="border" style="height: 716px; overflow-y: scroll; margin-top: 20px"> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> </div> <button style="width: 100%">This button should stick to bottom</button>
3 個解決方案
解決方案1
2 已采納 2019-08-13 15:05:01
可能您必須使用額外的div來獲得窗口內的所有空間，因為容器廣告會將其粘貼到邊緣（頂部/左側/右側/高度= 0px）！
甚至可能需要使容器overfolow:none供將來使用！
使用CSS函數“ calc”計算的可滾動div的高度如下：
.container { position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; margin: 10px; } .scrollable { overflow-y: scroll; margin-top: 20px; height: calc(100% - 124px); /*124px => 10px on container margin + 79px top div + 15px button + 20 px this top margin*/ } .border { border: 1px solid }
<div class="container"> <div class="border" style="height: 79px;"></div> <div class="border scrollable"> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> <div class="border" style="height: 79px;"></div> </div> <button style="width: 100%;">This button should stick to bottom</button> </div>
解決方案2
1 2019-08-13 16:12:28
我用的是Position：sticky
並且我添加了一個彈性框彈性列，以確保其響應速度更快
您可能需要檢查https://caniuse.com/#feat=css-sticky以確保其可以正常工作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ } .border { border: 1px solid } .wrapper { display: flex; flex-direction: column; } .sticky-bottom { width: 100%; position:sticky; bottom:0; z-index:900; } </style> </head> <body> <div class="container"> <div class="border" style="height: 79px;"> </div> <div class="wrapper"> <div class="border" style="height: 716px; overflow-y: scroll; margin-top: 20px"> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> </div> </div> <button class="sticky-bottom">This button should stick to bottom</button> </div> </body> </html>
解決方案3
0 2019-08-13 14:51:59
我不確定這些要求的含義，但是要使按鈕具有粘性，可以使用粘性位置。 參見示例。 同樣對於您的固定高度，對於哪個元素？ 個人div還是第二個div？
對於Sticky最好的閱讀是： https : //www.w3schools.com/howto/howto_css_sticky_element.asp
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .border { border: 1px solid } </style> </head> <body> <div class="border" style="height: 79px;"> </div> <div class="border" style="overflow-y: scroll; margin-top: 20px"> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> <div class="border" style="height: 79px;"> </div> </div> <button style="width: 100%; position: sticky; bottom: 0">This button should stick to bottom</button> </body> </html>
如何在溢出y div中強制滾動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.