面试准备(一)---左固定右自适应布局

58面试 专栏收录该内容
1 篇文章 0 订阅

左固定右自适应布局

这是一个很常见的布局,当然也可以实现右侧自适应,左侧自适应。比如常见的网页中,左侧导航栏是固定的,右侧的内容区要自适应浏览器的大小。 
现在我们来看下HTML布局:

<div id="outer">

  <div id="sidebar" style="height:240px;">固定宽度区</div>

  <div id="content" style="height:340px;">自适应区</div>

</div>

<div id="footer">后面的一个DIV,以确保前面的定位不会导致后面的变形</div>

下面讲一下常见的方法: 
1
、将左侧div浮动,右侧div设置margin-left

       .sidebar{

            width: 300px;

            height: 300px;

            background-color: pink;

            float:left;

        }

        .content{

            margin-left: 300px;

            height: 100px;

            background-color: blue;

        }

        .footer{

            background-color: red;

        }

        .outer:after{

            display: block;

            content:'';

            clear: both;

            visibility: hidden;

        }

        .outer{

            zoom:1;

        }

 

大家要注意html中必须使用div标签,不要妄图使用什么p标签来达到目的。因为div有个默认属性,即如果不设置宽度,那他会自动填满他的父标签的宽度。这里的content就是例子。

当然我们不能让他填满了,填满了他就不能和sidebar保持同一行了。我们给他设置一个margin。由于sidebar在左边,所以我们设置contentmargin-left值,值比sidebar的宽度大一点点——以便区分他们的范围。例子中是300.

假设content的默认宽度是100%,那么他设置了margin后,他的宽度就变成了100%-300,此时content发现自己的宽度可以与sidebar挤在同一行了,于是他就上来了。

而宽度100%是相对于他的父标签来的,如果我们改变了他父标签的宽度,那content的宽度也就会变——比如我们把浏览器窗口缩小,那wrap的宽度就会变小,而content的宽度也就变小——但,他的实际宽度100%-300始终是不会变的。

这个方法看起来很完美,只要我们记得清除浮动(这里我用了最简单的方法),那footer也不会错位。而且无论contentsidebar谁更长,都不会对布局造成影响.

但实际上这个方法有个限制——htmlsidebar必须在content之前! 
如果siderbar当到了content后面,就会出现如下的效果: 

但我需要sidebarcontent之后!因为我的content里面才是网页的主要内容,我不想主要内容反而排在次要内容后面。

但如果sidebarcontent之后,那上面的一切都会化为泡影。

可能有的人不理解,说你干嘛非要sidebar在后面呢?这个问题说来话长,反正问题就是——content必须在sidebar之前,但content宽度要自适应,怎么办?接着往下看。

2、固定区采用绝对定位,自适应区仍然设置margin 
CSS
代码如下:

        .sidebar{

            width: 300px;

            height: 300px;

            background-color: pink;

            position: absolute;

            top:0;

            left: 0;

 

        }

        .content{

            height: 100px;

            background-color: blue;

        }

        .footer{

            background-color: red;

        }

 

        .outer{

            position: relative;

        }



  • 可以发现,此时下面的红色div受影响了。其实这与footer无关,而是因为outersidebar的无视造成的。看来这种定位方式只能满足sidebar自己,但对他的兄弟们却毫无益处。

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

       .sidebar{

            width: 300px;

            height: 300px;

            background-color: pink;

            display:table-cell;

 

        }

        .content{

            height: 100px;

            background-color: blue;

            display:table-cell;

        }

        .footer{

            background-color: red;

        }

 

        .outer{

            display: table;

            width:100%;

        }

不过这种做法,如果sidebar写在content前面,sidebar会固定在左侧,否则固定在右侧。 
HTML

<div class="outer">

    <div class="sidebar">

        sidebar固定区域

    </div>

    <div class="content">

        content自适应区域

    </div>

</div>

<div class="footer">

    后面的一个DIV,以确保前面的定位不会导致后面的变形

</div>

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

———————再说一点————————

如果不考虑ie7及以下版本,则使用标准方法;如果不在意sidebarcontent的顺序,则用第一种方法;如果不考虑对其他兄弟元素的影响,用第3种方法。

以上代码都没在IE6测试,有问题不负责解释。让IE6寿终正寝的办法就是——从此不再理他。

左边定宽,右边自适应布局的几种方法

实际的页面开发中经常会遇到左边定宽,右边自适应的需求,特别是一些管理系统,比如左边显示信息或操作列表,右边显示详情,如下所示:、

https://images2015.cnblogs.com/blog/781464/201704/781464-20170418115331993-2006078346.png

 

 针对这种布局,首先抽象出页面结构如下:

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         * {
 8             padding: 0;
 9             margin: 0;
10             color: #fff;
11             font-size: 30px;
12             font-weight: bold;
13             text-align: center;
14             box-sizing: border-box;
15         }
16         aside {
17             width: 200px;
18             height: 200px;
19             padding-top: 75px;
20             background: #5A6A94;
21         }
22         section {
23             height: 200px;
24             padding-top: 75px;
25             background: #BE4F4F;
26         }
27     </style>
28 </head>
29 <body>
30     <!-- 左边定宽 -->
31     <aside class="left">Left</aside>
32     <!-- 右边自适应 -->
33     <section class="right">Right</section>
34 </body>
35 </html>

 

 

浏览器中效果:

https://images2015.cnblogs.com/blog/781464/201704/781464-20170418132534009-1795516726.png

 

需要实现的效果如下:

https://images2015.cnblogs.com/blog/781464/201704/781464-20170418132635290-474036887.png

 

那么针对这种常见的布局,方式是非常多的,下面给出几种比较简单和常见的方法。

 

方法一:左边设置左浮动,右边宽度设置100%

https://images2015.cnblogs.com/blog/781464/201704/781464-20170418142446462-2092558390.png

【分析】这样的方式简单得让我怀疑,但是效果上确实是实现了。

 

方法二 父容器设置 displayflexRight部分设置 flex

https://images2015.cnblogs.com/blog/781464/201704/781464-20170418133723727-2062557112.png

【分析】displayflex; 设置为弹性盒子,其子元素可以通过设置 flex 的数值来控制所占空间的比例。

 

方法三设置浮动 + css 中使用 calc() 函数

https://images2015.cnblogs.com/blog/781464/201704/781464-20170418134329102-1438956231.png

【分析】

1. 浮动。(注意:为了不影响其他元素,别忘了在父级上清除浮动)

2. calc() = calc(四则运算用于在 css 中动态计算长度值,需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px)

3. vw viewport width1vw = viewport 宽度的 1%, 100vw = viewport width,

同样的还有 vh viewport height1vw = viewport 高度的 1% 100vh = viewport height

浏览器支持情况: 主流浏览器、IE10+ 

vw vh 会随着viewport 的变化而变化,因此十分适合于自适应场景来使用。

 

方法四:使用负margin

首先修改页面结构,为自适应部分添加容器 .container, 同时改变左右部分的位置,如下:

https://images2015.cnblogs.com/blog/781464/201704/781464-20170418140611634-1456313328.png

 

设置样式:

https://images2015.cnblogs.com/blog/781464/201704/781464-20170418140632681-1488438074.png

【分析】

1. 首先设置左边部分和右边部分左浮动,并为自适应部分(Right)设置宽度100%。此时的效果是这样的:

https://images2015.cnblogs.com/blog/781464/201704/781464-20170418140802602-437278018.png

2. 设置左边部分左外边距为负100%,此时效果如下:

https://images2015.cnblogs.com/blog/781464/201704/781464-20170418141003181-938629852.png

但是右边部分的宽度仍然为100%,部分内容被 Left 所覆盖。

3.  Right 部分添加左边距(即 Left 部分的宽度)

https://images2015.cnblogs.com/blog/781464/201704/781464-20170418141137524-1846492059.png

此时可以看到,Right 部分的内容居中显示了。

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值