javascript DIV高度自适应

最新推荐文章于 2024-06-25 10:18:33 发布

tuobana123

最新推荐文章于 2024-06-25 10:18:33 发布

阅读量5.6k

点赞数

分类专栏： Web 基础

本文链接：https://blog.csdn.net/pingnanlee/article/details/11001239

版权

Web 基础专栏收录该内容

21 篇文章 0 订阅

订阅专栏

JS实现div高度自适应，主要思路，获取窗口大小，然后减去固定的高度。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript"> 
	window.onresize = function(){
		var len = document.documentElement.clientHeight;
		document.getElementById("d1").style.height = len - 200 + 'px';
		document.getElementById("d2").style.height = len - 200 + 'px';
	};
</script> 

</head>
<body>
		<div style="height: 100px; width: 100%;background-color: Red;">
		</div>
	  <div id="d1" style="height: 540px; width: 100px; background-color: Green; float:left;">
	  </div>
	  <div id="d2" style="height: 540px; background-color: Yellow; margin-left:100px;">
	  </div>

	  <div style="height: 100px; width: 100%; background-color: black; ">
	  </div>
</body>
</html>

注意：d1使用float特性，这样d2也会具备float属性，d2的margin-left刚好是d1的width值，这就是实现了宽度自适应。

高度自适应，捕捉onresize事件，获取窗口大小，减去头部和顶部固定高度。