左右布局，左侧固定右侧自适应，全屏

最新推荐文章于 2020-04-18 13:28:38 发布

kitu

最新推荐文章于 2020-04-18 13:28:38 发布

阅读量664

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u013285483/article/details/52036745

本文介绍了一种使用HTML和CSS实现特殊网页布局的方法，并通过JavaScript实现了窗口调整大小时的高度自适应。网页包含一个固定宽度的侧边栏和主要内容区域，随着页面滚动，内容区域能够呈现出特定的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="ch">
<head>
	<meta charset="UTF-8">
	<title>当元素出现在显示区域时元素向上滑动出现</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 

    <script src="js/jquery-1.9.1.min.js" ></script>
    <script src="js/bootstrap.min.js" ></script>
    <style type="text/css">
    	.containter{
    		overflow: hidden;
    		min-width:960px;
    		min-height: 680px;
    	}
		.aside{
    		width:300px;
    		padding-bottom: 9000px;
    		margin-bottom: -9000px;
    		float: left;
    		background: red;
    		z-index: 1;
    		position:relative;
    	}
    	.kk{
    		padding-left:300px;
    		margin-left:-300px;
			float: left;
			width:100%;
			background: yellow;
    		padding-right:10%;

    	}
    </style>
    <script type="text/javascript">
    		$(function(){
    			$(".containter").css("height",$(window).height());
    			$(window).resize(function(event) {
    				/* Act on the event */
    				$(".containter").css("height",$(window).height());
    			});
    			
    		})
    </script>
</head>
<body>
	<div class="containter">
		<div class="aside">1111111111</div>
		<div class="kk">
			<table class="table table-bordered table-striped table-hover">
				<thead>
					<tr>
						<td>1</td>
						<td>1</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>1</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>	
</html>