div 自適應高度最大高度后滾動條顯示

2024-04-27 15:17:30

字體：大中小

來源：轉載

供稿：網友

背景：為解決這樣一種情況：設置div的最大高度為xx%，想要自適應瀏覽器窗口高度，但是超出div高度的部分，就算設置滾動條scroll或者auto，滾動條也并不會顯示出來。而max-height為具體px的則會顯示。下面隨便弄點代碼說明這2種情況：

一、高度自適應設置為xx%

代碼：

<!DOCTYPE html><html><body style="height:100%;"><div style="max-height:10%;overflow:scroll;border:1px solid red;"> <br>why<br>are<br>you<br>so<br>cute<br>!<br>! <br>why<br>are<br>you<br>so<br>cute<br>!<br>!</div></body></html>效果圖：
二、固定最大高度px
代碼：
<!DOCTYPE html><html><body style="height:100%;"><div style="max-height:100px;overflow:scroll;border:1px solid red;"> <br>why<br>are<br>you<br>so<br>cute<br>!<br>! <br>why<br>are<br>you<br>so<br>cute<br>!<br>!</div></body></html>效果：
 那么，想要自適應又出現滾動條，就在js里面獲取body高度，
<!DOCTYPE html><html><head><script src="http://Ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>  <script>  $(document).ready(function(){    var bodyHeight = $("body").height();    $("div").CSS("max-height","100px");</script> </head><body style="height:100%;"><div style="overflow:scroll;border:1px solid red;"> <br>why<br>are<br>you<br>so<br>cute<br>!<br>! <br>why<br>are<br>you<br>so<br>cute<br>!<br>!</div></body></html>