<!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> 
402
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
