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

最新推荐文章于 2024-08-14 15:07:03 发布

weixin_30624825

最新推荐文章于 2024-08-14 15:07:03 发布

阅读量49

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mxy666/p/6049229.html

本文介绍了一个简单的网页布局案例，通过使用HTML、CSS及jQuery实现了侧边栏的展开与收起效果。该案例中，点击按钮可以切换侧边栏的宽度，从而改变内容区域的显示方式。

<!DOCTYPE html>
<html>

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

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

#sidebar {
position: relative;
float: left;
width: 44px;
}

#sidebar #btn {
position: absolute;
top: 220px;
right: -20px;
width: 20px;
height: 40px;
background: red;
}

#content {
margin-left: 80px;
}

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