文档章节

css实现右侧固定宽度,左侧宽度自适应

furw
 furw
发布于 2015/08/26 16:08
字数 922
阅读 120
收藏 5

反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。

这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧?

要实现这种布局,也算比较简单。我们先给出html结构:

<div id="wrap">
  <div id="sidebar" style="height:240px;">固定宽度区</div>
  <div id="content" style="height:340px;">自适应区</div>
</div>
<div id="footer">后面的一个DIV,以确保前面的定位不会导致后面的变形</div>

代码中的#wrap的div,是用来包裹我们要定位的这两个区的;他后面还有个#footer,用来测试在前面的定位搞定后会不会导致后面的div错位——如果错位了,那证明我们的定位方法必须改进。

下面列举几个常见的方法:

1,固定宽度区浮动,自适应区不设宽度而设置 margin

我们拿右边定宽左边自适应来做示范,CSS代码如下:

#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之后,那上面的一切都会化为泡影。

2,标准浏览器的方法

当然,以不折腾人为标准的w3c标准早就为我们提供了制作这种自适应宽度的标准方法。那就简单了:把wrap设为display:table并指定宽度100%,然后把content+sidebar设为display:table-cell;然后只给sidebar指定一个宽度,那么content的宽度就变成自适应了。

代码很少,而且不会有额外标签。不过这是IE7都无效的方法。


本文转载自:http://jo2.org/css-auto-adapt-width/

furw
粉丝 18
博文 44
码字总数 14655
作品 0
海淀
前端工程师
私信 提问
CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题

一: 右侧固定宽度 左侧自适应   第一种方法:左侧用margin-right,右侧float:right 就可以实现。   CSS代码可以如下写: 如上代码就可以实现效果。 第2种方法:左侧同样用margin-right ...

喵王不瞌睡
2014/10/23
3.2K
0
css布局 - 常规上中下分左右布局的一百种实现方法

一、 上中下左固定 - fixed+margin 概括:如图,此种布局就是顶部、底部和左侧固定不动,只有中间右侧超出可滚动。 html: 1 1 2 关键点: 上下部分就是普通处理,fixed固定布局 position: ...

Eddie_yang
2018/11/15
143
0
CSS——让“盒子”动起来:① 浮动

前言: 前 10 篇文章,我们基本上都是在用“理论”学习“理论”,那从这篇开始,我们试着用“实践”来学习理论,然后又用于实践。 一个原则:把代码拷贝到 JS Bin 上,对照效果搞懂每行代码的...

OliZhao
04/28
0
0
dedecms后台界面

dedecms后台的左右两个框用html css如何实现的。。。。没搞出来, 应为左列的宽度是固定的,如何让右侧自适应剩余的空间,求指导。 下面是我用百分比写的,但要求是左侧是固定像素,该怎么弄...

曙光城邦
2013/12/09
262
0
关于Jquery区块无多余间隙自适应屏幕,有演示站,望高手拿下。

这是地址: http://zx.taobao.com/template_list.htm?industry=3 想要的功能是模板列表区域自适应页面的宽度,最重要的是左边的第一个模板块的margin-left属性为0,而最后面的一个模板是靠右...

陈晨12345789
2012/08/23
291
2

没有更多内容

加载失败,请刷新页面

加载更多

Qt编写自定义控件69-代码行数统计

一、前言 代码行数统计主要用来统计项目中的所有文件的代码行数,其中包括空行、注释行、代码行,可以指定过滤拓展名,比如只想统计.cpp的文件,也可以指定文件或者指定目录进行统计。写完这...

飞扬青云
8分钟前
1
0
驰骋工作流引擎-ccflow关于 “ 是否自动计算未来的处理人”的功能变更

关键字:流程未来节点处理人 工作流快速开发平台 工作流流设计 业务流程管理 asp.net 开源工作流 业务背景:一个流程在启动起来后,是可以对一些节点计算出来处理人是谁,流程的走向。对于另...

孟娟
24分钟前
3
0
IT兄弟连 HTML5教程 HTML5表单 HTML表单设计1

表单是PHP程序中最常使用的收集站点访问者信息的数据输入界面。通过表单浏览器获取用户的输入数据,并传送给Web服务器的脚本程序中,以各种不同的方式进行处理。在表单中提供了多种输入方式,...

老码农的一亩三分地
25分钟前
1
0
武者Vue

本文转载于:专业的前端网站➼武者Vue 1 - Introduction2 - The Vue Instance3 - Data & Methods4 - Data Binding5 - Events6 - Event Modifiers7 - Keyboard Events8 - Two-Way Data......

前端老手
31分钟前
3
0
uni app 零基础小白到项目实战

$emit 子组件传给父组件$ref 父组件操作子组件 公用模板 uni-app全局变量的几种实现方法 const websiteUrl = 'http'const now = Date.now || function() { return new Date().getTime......

达达前端小酒馆
41分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部