您的位置：首页 > 其它

常见布局：左栏固定右栏自适应

2016-06-05 14:47 260 查看

这节我们要实现的目的只有一个，就是一栏固定一栏自适应。

1、使用div，这样就可以自动填满父标签宽度，设想方案如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
body{padding: 0;margin:0;}
#wrap{
overflow: hidden;*zoom: 1;
}
#sitebar{background: #D7B9FF; float: left; width: 300px;}
#content{
background: #36CEC5;margin-left:300px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="sitebar">我是固定左栏</div>
<div id="content">
我是右栏内容
</div>
</div>
</body>
</html>

但这个有个限制，就是sidebar必须在content之前！

2、遵循网页优化的角度，主要内容应该放前面，那么需要把content和sitebar位置换一下，然后固定栏使用绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
body{padding: 0;margin:0;}
#wrap{
*zoom: 1; position: relative;
}
#sitebar{background: #D7B9FF; width: 300px;position: absolute;left:0;top: 0;}
#content{
background: #36CEC5;margin-left: 300px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
我是右栏内容
</div>
<div id="sitebar">我是固定左栏</div>

</div>

</body>
</html>

但是这样也有一个问题，因为左栏使用了绝对定位，那么再有其他层的话就会被它挡住。

3、加多一个层，使用浮动和margin结合

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
body{padding: 0;margin:0;}

#sitebar{background: #D7B9FF; width: 300px;float: left;}
#content{
background: #36CEC5;float: right;width: 100%;margin-right: -300px;
}
#content_wrap{
margin-right: 300px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content_wrap">
<div id="content">
我是内容
</div>
<div id="sitebar">我是固定左栏</div>
</div>

</div>

</body>

总结该布局应具备条件：

1、content自适应，sidebar固定

2、content在sidebar之前

3、后面的元素不受影响

若想左栏为100%，可参考以下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
body{padding: 0;margin:0;}
body,html{width: 100%;height: 100%;}
#wrap{height: 100%;}
#sitebar{background: #D7B9FF; width: 300px;float: left;height: 100%;}
#content{
background: #36CEC5;float: right;width: 100%;margin-right: -300px;
}
#content_wrap{
margin-right: 300px;height: 100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content_wrap">
<div id="content">
Underscore 是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题：“如果我面对一个空白的 HTML 页面，并希望立即开始工作，我需要什么？” 他弥补了 jQuery 没有实现的功能，同时又是 Backbone 必不可少的部分。
</div>
<div id="sitebar">我是固定左栏</div>
</div>

</div>
</body>

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

标签：

相关文章推荐

新的分享

章节导航