js控制自适应内容布局

最新推荐文章于 2024-04-29 11:17:53 发布

graceup

最新推荐文章于 2024-04-29 11:17:53 发布

阅读量982

点赞数

分类专栏： js 文章标签： js 自适应内容

本文链接：https://blog.csdn.net/graceup/article/details/41521267

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js控制自适应内容布局</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

html,body {
	height: 100%;
	width: 100%;
}
.top {
	height: 100px;
	width: 100%;
	background: #0079f5;
}

.footer {
	height: 100px;
	width: 100%;
	background: #EE4063;
}
</style>
</head>
<body>
	<div class="top">头部100px;</div>
	<div class="wrap">
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		<!-- 
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br> 中间自适应部分<br>
		中间自适应部分<br> 中间自适应部分-----------------------------------<br>
		 -->
	</div>
	<div class="footer">尾部100px</div>
</body>

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
	var wrapHeight = $(".wrap").height();
	var widowHeight = $(window).height();
	if(wrapHeight<(widowHeight-200)){
		$(".wrap").height(widowHeight-200);
	}
</script>

</html>

graceup

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js控制自适应内容布局

js控制自适应内容布局* { margin: 0; padding: 0;}html,body { height: 100%; width: 100%;}.top { height: 100px; width: 100%; background: #0079f5;}.footer { height: 100px; width: 100%; backgroun
复制链接

扫一扫

专栏目录