一个简单的一侧左侧固定，右侧自适应demo

m357105957

于 2016-11-09 22:50:39 发布

阅读量228

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/m357105957/article/details/53107076

本文介绍了一个使用HTML、CSS和jQuery实现的简单网页布局案例，该案例中包含一个可以手动调整宽度的侧边栏区域，点击按钮后侧边栏宽度发生变化，并相应地调整主要内容区域的宽度。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style>
#wrap {
overflow: hidden;
*zoom: 1;
}

#content,
#sidebar {
background-color: #eee;
}

#sidebar {
position: relative;
float: left;
width: 44px;
}
#sidebar #btn{
position: absolute;
top: 240px;
right: -20px;
width: 20px;
height: 40px;
background: #FF0000;
}

#content {
margin-left: 80px;
}

#footer {
background-color: #f00;
color: #fff;
margin-top: 1em
}
</style>
</head>

<body>
<div id="wrap">
<div id="sidebar" style="height:500px;">固定宽度区<span id="btn">点我</span></div>
<div id="content" style="height:500px;">自适应区</div>
</div>

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
var flag = 0;
$("#btn").click(function() {
if(flag==0){
$("#sidebar").css("width", "130px");
$("#content").css("margin-left", "166px");
flag = 1;
}else{
$("#sidebar").css("width", "44px");
$("#content").css("margin-left", "80px");
flag = 0;
}

})

</script>
</body>

</html>