div 自適應高度 最大高度後滾動條顯示
阿新 • • 發佈:2019-01-04
背景:為解決這樣一種情況:設定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>