css实现右侧固定宽度,左侧宽度自适应
https://blog.csdn.net/qq_22889599/article/details/78414040
反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。
这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧?
要实现这种布局,也算比较简单。我们先给出html结构:
代码中的#wrap的div,是用来包裹我们要定位的这两个区的;他后面还有个#footer,用来测试在前面的定位搞定后会不会导致后面的div错位——如果错位了,那证明我们的定位方法必须改进。
下面列举几个常见的方法:
1,固定宽度区浮动,自适应区不设宽度而设置 margin
我们拿右边定宽左边自适应来做示范,CSS代码如下:
1
2 3 4 5 6 7 8 9 10 11 12 13 |
#wrap {
overflow: hidden; *zoom: 1; } #content ,#sidebar { background-color: #eee; } #sidebar { float: right; width: 300px; } #content { margin-right: 310px; } #footer {background-color: #f00;color:#fff; margin-top: 1em} |
其中,sidebar让他浮动,并设置了一个宽度;而content没有设置宽度。
大家要注意html中必须使用div标签,不要妄图使用什么p标签来达到目的。因为div有个默认属性,即如果不设置宽度,那他会自动填满他的父标签的宽度。这里的content就是例子。
当然我们不能让他填满了,填满了他就不能和sidebar保持同一行了。我们给他设置一个margin。由于sidebar在右边,所以我们设置content的margin-right值,值比sidebar的宽度大一点点——以便区分他们的范围。例子中是310.
假设content的默认宽度是100%,那么他设置了margin后,他的宽度就变成了100%-310,此时content发现自己的宽度可以与sidebar挤在同一行了,于是他就上来了。
而宽度100%是相对于他的父标签来的,如果我们改变了他父标签的宽度,那content的宽度也就会变——比如我们把浏览器窗口缩小,那wrap的宽度就会变小,而content的宽度也就变小——但,他的实际宽度100%-310始终是不会变的。
这个方法看起来很完美,只要我们记得清除浮动(这里我用了最简单的方法),那footer也不会错位。而且无论content和sidebar谁更长,都不会对布局造成影响.
但实际上这个方法有个很老火的限制——html中sidebar必须在content之前!
但我需要sidebar在content之后!因为我的content里面才是网页的主要内容,我不想主要内容反而排在次要内容后面。
但如果sidebar在content之后,那上面的一切都会化为泡影。
可能有的人不理解,说你干嘛非要sidebar在后面呢?这个问题说来话长,反正问题就是——content必须在sidebar之前,但content宽度要自适应,怎么办?
下面有两个办法,不过我们先把html结构改成我们想要的样子:
2,固定宽度区使用绝对定位,自适应区照例设置margin
我们把sidebar扔掉,只对content设置margin,那么我们会发现content的宽度就已经变成自适应了——于是content对sidebar说,我的宽度,与你无关。
content很容易就搞定了,此时来看看sidebar,他迫不得已抛弃了float。我们来看看sidebar的特点:在右边,宽度300,他的定位对content不影响——很明显,一个绝对主义分子诞生了。
于是我们的css如下:
1
2 3 4 5 6 7 8 9 |
#wrap {
*zoom: 1; position: relative; } #sidebar { width: 300px; position: absolute; right: 0; top: 0; } #content { margin-right: 310px; } |
这段css中要注意给wrap加上了相对定位,以免sidebar太绝对了跑到整个网页的右上角而不是wrap的右上角。
好像完成了?在没有看footer的表现时,我很欣慰。我们来把sidebar加长——增长100px!不要一年,只要一条内裤!哦,,,只要一句代码。
但是,footer怎么还是在那儿呢?怎么没有自动往下走呢?footer说——我不给绝对主义者让位!
其实这与footer无关,而是因为wrap对sidebar的无视造成的——你再长,我还是没感觉。
看来这种定位方式只能满足sidebar自己,但对他的兄弟们却毫无益处。
3,float与margin齐上阵
经过前面的教训,我们重新确立了这个自适应宽度布局必须要达成的条件:
- sidebar宽度固定,content宽度自适应
- content要在sidebar之前
- 后面的元素要能正常定位,不能受影响
由于绝对定位会让其他元素无视他的存在,所以绝对定位的方式必须抛弃。
如果content和sidebar一样,都用float,那content的自适应宽度就没戏了;如果不给content加float,那sidebar又会跑到下一行去。
所以,最终我决定:float与margin都用。
我打算把content的宽度设为100%,然后设置float:left,最后把他向左移动310,以便于sidebar能挤上来。
但这么一来content里面的内容也会跟着左移310,导致被遮住了,所以我们要把他重新挤出来。为了好挤,我用了一个额外的div包裹住内容,所以html结构变成了这种样子:
css则变成这样:
1
2 3 4 5 6 7 8 9 |
#sidebar {
width: 300px; float: right; } #content { margin-left: -310px; float: left; width: 100%; } #contentb { margin-left: 310px; } |
这样一改,真正的“content”就变成了contentb,他的宽度跟以前的content一样,是100%-310.
大家可能注意到了代码中的两个margin-left,一个-310px一个310px,最后结合起来相当于什么都没干,着实蛋疼。但他确实解决了content与sidebar的顺序问题。
这个方法的缺点就是:太怪异,以及额外多了一层div。
4,标准浏览器的方法
当然,以不折腾人为标准的w3c标准早就为我们提供了制作这种自适应宽度的标准方法。那就简单了:把wrap设为display:table并指定宽度100%,然后把content+sidebar设为display:table-cell;然后只给sidebar指定一个宽度,那么content的宽度就变成自适应了。
代码很少,而且不会有额外标签。不过这是IE7都无效的方法。
———————割尾巴————————-
如果不考虑ie7及以下版本,则使用标准方法;如果不在意sidebar与content的顺序,则用第一种方法;否则用第3种方法。
以上代码都没在IE6测试,有问题不负责解释。个人觉得,让IE6寿终正寝的办法就是——从此不再理他。
css实现右侧固定宽度,左侧宽度自适应的更多相关文章
- [转]css实现左侧宽度自适应,右侧固定宽度
原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...
- CSS无序列实现表宽度自适应的表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 老生长谈:css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- 老生长谈,温故知新:css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...
- CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- CSS实现侧边栏固定宽度,内容栏自适应
1,固定宽度区浮动,自适应区不设宽度而设置 margin 我们拿右边定宽左边自适应来做示范,CSS代码如下: #wrap { overflow: hidden; *zoom: 1; } #c ...
- css回顾之左侧宽度自适应布局
目标: <!DOCTYPE html> <meta charset=utf-8> <html> <head> <title>alibaba& ...
- 用css、html编写一个两列布局的网页,名称为css.html ,要求左侧宽度为200px ,右侧自动扩展
<body><div style=" float:left; width:200px; height:300px; border: 1px #0033FF solid;&q ...
- css左右侧自动填充宽度布局
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- MySQL 错误 1366:1366 Incorrect integer value
错误提示:General error: 1366 Incorrect integer value: '' for column 'pay_type' at row 1 (SQL: INSERT INT ...
- C#利用反射实现两个类的对象之间相同属性的值的复制
http://blog.csdn.net/u013093547/article/details/53584591 今天在拷贝对象的时候,看着代码实在是有点烦,一堆一样的代码,还是找找有没有直接反射拷贝 ...
- React性能分析利器来了,妈妈再也不用担心我的React应用慢了(转)
Profiler React16.5正式在devtool中加入了Profiler功能,用于收集每次变更导致的渲染时间,帮助开发者发现潜在的性能问题,有助于开发更高性能的React应用 官方博客 如何使 ...
- DrawerLayout 设置为滑动范围全盘
public void setDrawerLeftEdgeSize(DrawerLayout drawerLayout, float displayWidthPercentage) { if (dra ...
- js中if语句的几种优化代码写法
UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法. 一.使用常见的三元操作符 复制代码 代码如下: if (foo) bar(); ...
- 逻辑卷管理LVM(logical volume manager)
LVM的全名是logical volume manager,中文翻译逻辑卷管理器.之所以称为卷是因为可以将文件系统像卷一样伸长和缩短,LVM的做法是将几个物理的分区(或磁盘)通过软件组合成为一块独立的 ...
- thymeleaf 标签的使用
1.html页面 2.<label class="control-label col-sm-1" for="vehiclesFormalities"> ...
- 2018GIAC全球互联网架构大会上海站最新日程抢先看!
2018年11月23-24日,为期两天的 GIAC全球互联网架构师大会将在上海拉开帷幕.GIAC全球互联网架构大会是由msup和高可用架构技术社区联合举办的面向架构师.技术负责人及高端技术从业人员的年 ...
- 电子产品使用感受之--Mac Mini 买了之后有什么用?-- 开发啊!
2019.01.29 更新 Mac Mini 2018这么强劲的性能,不用来做点儿什么真是可惜了. 如果只是用来看看Youtube视频,打开网页看看twitter什么的,那可真是巨大的浪费了. 因为这 ...
- [No0000F5]C# 类(Class)
当你定义一个类时,你定义了一个数据类型的蓝图.这实际上并没有定义任何的数据,但它定义了类的名称意味着什么,也就是说,类的对象由什么组成及在这个对象上可执行什么操作.对象是类的实例.构成类的方法和变量成 ...