div 自适应高度最大高度后滚动条显示

最新推荐文章于 2024-06-12 07:30:00 发布

郢都杨羊羊

最新推荐文章于 2024-06-12 07:30:00 发布

阅读量2.2w

点赞数 4

分类专栏：其他文章标签： css

本文链接：https://blog.csdn.net/alwaysPursuing/article/details/38928769

版权

其他专栏收录该内容

2 篇文章 0 订阅

订阅专栏

背景：为解决这样一种情况：设置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>