面试准备（一）---左固定右自适应布局

末蓝、 2022-05-19 03:21 223阅读 0赞

# **左固定右自适应布局** #

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

<div id="sidebar" style="height:240px;">固定宽度区</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在左边，所以我们设置content的margin-left值，值比sidebar的宽度大一点点——以便区分他们的范围。例子中是300.

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

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

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

**但实际上这个方法有个限制****——html****中****sidebar****必须在****content****之前！**  
如果siderbar当到了content后面，就会出现如下的效果：  
  
但我需要sidebar在content之后！因为我的content里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。

但如果sidebar在content之后，那上面的一切都会化为泡影。

可能有的人不理解，说你干嘛非要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无关，而是因为outer对sidebar的无视造成的。看来这种定位方式只能满足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：

sidebar固定区域

</div>

content自适应区域

</div>

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

</div>

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

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

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

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

## **[左边定宽，右边自适应布局的几种方法][Link 1]** ##

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

![/images/20220519/b574d19995474729837fef4dd1b83130.png][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>

浏览器中效果：

![/images/20220519/61e41f04e1354623a6f65e8ecfa592b8.png][https_images2015.cnblogs.com_blog_781464_201704_781464-20170418132534009-1795516726.png]

需要实现的效果如下：

![/images/20220519/16c495fba2844fab9307d8872d28a724.png][https_images2015.cnblogs.com_blog_781464_201704_781464-20170418132635290-474036887.png]

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

**方法一**：左边设置左浮动，右边宽度设置100%

![/images/20220519/ea6ea04f9f994f18b4af665d752e0186.png][https_images2015.cnblogs.com_blog_781464_201704_781464-20170418142446462-2092558390.png]

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

**方法二**： 父容器设置**display****：****flex****；**Right部分设置 **flex****：****1**

![/images/20220519/1c15c84c59424d8e976de6ddbaac364d.png][https_images2015.cnblogs.com_blog_781464_201704_781464-20170418133723727-2062557112.png]

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

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

![/images/20220519/64c7407571a5471ba5c4ef0787270a14.png][https_images2015.cnblogs.com_blog_781464_201704_781464-20170418134329102-1438956231.png]

【分析】

1. 浮动。（注意：为了不影响其他元素，别忘了在父级上清除浮动）

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

3. **vw**：viewport width。1vw = viewport 宽度的 1%, 100vw = viewport width,

同样的还有 vh： viewport height。1vw = viewport 高度的 1%， 100vh = viewport height。

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

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

**方法四：使用负****margin**

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

![/images/20220519/9f129e4c94804708ab38f4084a17786e.png][https_images2015.cnblogs.com_blog_781464_201704_781464-20170418140611634-1456313328.png]

设置样式：

![/images/20220519/ee28722ebdd0428f8039b1da366617bd.png][https_images2015.cnblogs.com_blog_781464_201704_781464-20170418140632681-1488438074.png]

【分析】

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

![/images/20220519/003b09e7b7234ab98f856e1641f17c1f.png][https_images2015.cnblogs.com_blog_781464_201704_781464-20170418140802602-437278018.png]

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

![/images/20220519/8ef9a7d2557947d7be27d4596e356fa4.png][https_images2015.cnblogs.com_blog_781464_201704_781464-20170418141003181-938629852.png]

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

3. 为 Right 部分添加左边距（即 Left 部分的宽度）

![/images/20220519/45d88b47346741068ed9cc32fbf0116f.png][https_images2015.cnblogs.com_blog_781464_201704_781464-20170418141137524-1846492059.png]

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

[Link 1]: http://www.cnblogs.com/wx1993/p/6727653.html
[https_images2015.cnblogs.com_blog_781464_201704_781464-20170418115331993-2006078346.png]: /images/20220519/b574d19995474729837fef4dd1b83130.png
[https_images2015.cnblogs.com_blog_781464_201704_781464-20170418132534009-1795516726.png]: /images/20220519/61e41f04e1354623a6f65e8ecfa592b8.png
[https_images2015.cnblogs.com_blog_781464_201704_781464-20170418132635290-474036887.png]: /images/20220519/16c495fba2844fab9307d8872d28a724.png
[https_images2015.cnblogs.com_blog_781464_201704_781464-20170418142446462-2092558390.png]: /images/20220519/ea6ea04f9f994f18b4af665d752e0186.png
[https_images2015.cnblogs.com_blog_781464_201704_781464-20170418133723727-2062557112.png]: /images/20220519/1c15c84c59424d8e976de6ddbaac364d.png
[https_images2015.cnblogs.com_blog_781464_201704_781464-20170418134329102-1438956231.png]: /images/20220519/64c7407571a5471ba5c4ef0787270a14.png
[https_images2015.cnblogs.com_blog_781464_201704_781464-20170418140611634-1456313328.png]: /images/20220519/9f129e4c94804708ab38f4084a17786e.png
[https_images2015.cnblogs.com_blog_781464_201704_781464-20170418140632681-1488438074.png]: /images/20220519/ee28722ebdd0428f8039b1da366617bd.png
[https_images2015.cnblogs.com_blog_781464_201704_781464-20170418140802602-437278018.png]: /images/20220519/003b09e7b7234ab98f856e1641f17c1f.png
[https_images2015.cnblogs.com_blog_781464_201704_781464-20170418141003181-938629852.png]: /images/20220519/8ef9a7d2557947d7be27d4596e356fa4.png
[https_images2015.cnblogs.com_blog_781464_201704_781464-20170418141137524-1846492059.png]: /images/20220519/45d88b47346741068ed9cc32fbf0116f.png