首页 > css教程 > 正文

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

原创 2018-02-11 09:56:39 0 24
本文主要和大家介绍了css实现右侧固定宽度 左侧宽度自适应,这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区,反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。

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

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


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

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

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

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中必须使用p标签,不要妄图使用什么p标签来达到目的。因为p有个默认属性,即如果不设置宽度,那他会自动填满他的父标签的宽度。这里的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结构改成我们想要的样子:


<p id="wrap">
  <p id="content" style="height:340px;">自适应区,在前面</p>
  <p id="sidebar" style="height:240px;">固定宽度区</p>
</p>

2,固定宽度区使用绝对定位,自适应区照例设置margin

我们把sidebar扔掉,只对content设置margin,那么我们会发现content的宽度就已经变成自适应了——于是content对sidebar说,我的宽度,与你无关。

content很容易就搞定了,此时来看看sidebar,他迫不得已抛弃了float。我们来看看sidebar的特点:在右边,宽度300,他的定位对content不影响——很明显,一个绝对主义分子诞生了。

于是我们的css如下:


#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,导致被遮住了,所以我们要把他重新挤出来。为了好挤,我用了一个额外的p包裹住内容,所以html结构变成了这种样子:


<p id="wrap">
  <p id="content" style="height:140px;">
    <p id="contentb">
      content自适应区,在前面
    </p>
  </p>
  <p id="sidebar" style="height:240px;">sidebar固定宽度区</p>
</p>

css则变成这样:


#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的顺序问题。

这个方法的缺点就是:太怪异,以及额外多了一层p。

4,标准浏览器的方法

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

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

———————割尾巴————————-

如果不考虑ie7及以下版本,则使用标准方法;如果不在意sidebar与content的顺序,则用第一种方法;否则用第3种方法。

相关推荐:

有2列,希望右侧固定宽度,左侧自动宽度。_html/css_WEB-ITnose

CSS固定宽度的三列布局运用的详细说明

CSS三栏布局探讨——中间固定宽度两边自适应宽度

以上就是css实现右侧固定宽度左侧宽度自适应的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:css 样式表 左侧
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • CSS3+Js实现响应式导航条_CSS/HTML
  • 从零学CSS系列之文本属性_基础教程
  • 手机屏幕尺寸测试——手机的实际显示页面的宽度_经验交流
  • CSS3中Transition属性详解以及示例分享_CSS/HTML
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节