背景:为解决这样一种情况:设置div的最大高度为xx%,想要自适应浏览器窗口高度,但是超出div高度的部分,就算设置滚动条scroll或者auto,滚动条也并不会显示出来。而max-height为具体px的则会显示。下面随便弄点代码说明这2种情况:
代码:
<!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>