充滿布局

時間 2019-11-29

標籤充滿佈局简体版

原文原文鏈接

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css"> 
		* { margin:0; padding:0;}
		html,body,.parent{width:100%; height:100%;overflow:hidden;}
		.top{position:absolute;top:0;left:0;right:0;height:100px; background:#333;}
		.left{position:absolute;top:100px;left:0;bottom:50px;width:200px; background:red;}
		.right{position:absolute;overflow:auto;left:200px;right:0;top:100px;bottom:50px;background:blue;}
		.bottom{position:absolute;left:0;right:0;bottom:0;height:50px; background:#333;}
	</style>
	<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
	<script>
		$(function(){
			$('#qh').on('click',function(){
				var width = $(this).parent().width();
				var j1 = (width == 50) ? {"width" : '200px'} : {"width" : '50px'}
				var j2 = (width == 50) ? {"left":"200px"} : {"left":"50px"}
				$(this).parent().stop().animate(j1,(width==50 ? 140 : 200));
				$(this).parent().siblings('.right').stop().animate(j2,170);
			});
		});
	</script>
	
</head>
<body>
	<div class="parent">
		<div class="top">top</div>
		<div class="left">
			<button id="qh">切換</button>
			11left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>leftleft<br/>left<br/>left<br/>left<br/><br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>left<br/>
		</div>
		<div class="right">
		11right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>right<br/>
		
		</div>
		<div class="bottom">bottom</div>
	</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。