zoukankan      html  css  js  c++  java
  • CSS实现侧边栏固定宽度,内容栏自适应

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

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

    #wrap {
        overflowhidden*zoom1;
      }
      #content ,#sidebar {
        background-color#eee
      }
      #sidebar {
        floatrightwidth300px;
      }
      #content {
        margin-right310px;
      }
      #footer {background-color#f00;color:#fffmargin-top1em}

    其中,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结构改成我们想要的样子:

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

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

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

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

    于是我们的css如下:

    #wrap {
        *zoom1positionrelative;
      }
      #sidebar {
        width300pxpositionabsoluteright0top0;
      }
      #content {
        margin-right310px;
      }

    这段css中要注意给wrap加上了相对定位,以免sidebar太绝对了跑到整个网页的右上角而不是wrap的右上角。

    好像完成了?在没有看footer的表现时,我很欣慰。我们来把sidebar加长——增长100px!不要一年,只要一条内裤!哦,,,只要一句代码。


    但是,footer怎么还是在那儿呢?怎么没有自动往下走呢?footer说——我不给绝对主义者让位!

    其实这与footer无关,而是因为wrap对sidebar的无视造成的——你再长,我还是没感觉。

    看来这种定位方式只能满足sidebar自己,但对他的兄弟们却毫无益处。

    3,float与margin齐上阵

    经过前面的教训,我们重新确立了这个自适应宽度布局必须要达成的条件:

    1. sidebar宽度固定,content宽度自适应
    2. content要在sidebar之前
    3. 后面的元素要能正常定位,不能受影响

    由于绝对定位会让其他元素无视他的存在,所以绝对定位的方式必须抛弃。

    如果content和sidebar一样,都用float,那content的自适应宽度就没戏了;如果不给content加float,那sidebar又会跑到下一行去。

    所以,最终我决定:float与margin都用。

    我打算把content的宽度设为100%,然后设置float:left,最后把他向左移动310,以便于sidebar能挤上来。

    但这么一来content里面的内容也会跟着左移310,导致被遮住了,所以我们要把他重新挤出来。为了好挤,我用了一个额外的div包裹住内容,所以html结构变成了这种样子:

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

    css则变成这样:

    #sidebar {
        width300pxfloatright;
      }
      #content {
        margin-left-310pxfloatleftwidth100%;
      }
      #contentb {
        margin-left310px;
      }

    这样一改,真正的“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寿终正寝的办法就是——从此不再理他。

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

  • 相关阅读:
    Dot Net WinForm 控件开发 (七) 为属性提下拉式属性编辑器
    WinForm 程序的界面多语言切换
    c#遍历HashTable
    Dot Net WinForm 控件开发 (三) 自定义类型的属性需要自定义类型转换器
    Dot Net WinForm 控件开发 (六) 为属性提供弹出式编辑对话框
    Dot Net WinForm 控件开发 (一) 写一个最简单的控件
    Dot Net WinForm 控件开发 (四) 设置属性的默认值
    Dot Net WinForm 控件开发 (二) 给控件来点描述信息
    Dot Net WinForm 控件开发 (八) 调试控件的设计时行为
    Dot Net WinForm 控件开发 (五) 复杂属性的子属性
  • 原文地址:https://www.cnblogs.com/czzblog/p/5667108.html
Copyright © 2011-2022 走看看