您的位置：首页 > 其它

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

2016-07-26 16:02 381 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航