实现左侧固定像素，右侧自适应布局的四种方案

Rock1688
318 阅读3分钟

一、利用 flex:1实现左侧固定200px, 右侧自适应。

HTML：

<body>
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>

CSS:

html,body{
    margin: 0;
}
html,body,.container{
    height: 100%;
}
.container{
    display: flex;
}
.left{
    width: 200px;
    height: 100%;
    background-color: dodgerblue;
}
.right{
    flex: 1;
    height: 100%;
}

解释:

  1. flex布局的主轴的默认方向是(row 水平方向，因此俩个元素会水平铺开)
  2. 左边的200px很好理解不解释。
  3. 右边的 flex:1; 是一个符合属性，是flex-shrink、flex-grow、flex-basis 的复合写法。

下面解释flex:1;

解释 flex:1

fleX:1; 其实是一个复合属性, 如图:

image.png

1. flex-grow:
当flex的空间有多余的时候, 所有的子元素按照比例进行瓜分,默认为 0 ，即：纵使主轴存在剩余空间，也不拉伸 （放大）。

瓜分规则为:

  1. 若所有伸缩项目的 flex-grow 值都为 1 ，则：它们将等分剩余空间（如果有空间的话）。
  2. 若三个伸缩项目的 flex-grow 值分别为： 1 、 1 、 2 ，则：分别瓜分到： 1/4、 1/4 、 1/2 的空间。

2. flex-shrink

flex-shrink 定义了项目的压缩比例，默认为 1 ，即：如果空间不足，该项目将会缩小。

举个栗子进行说明:

image.png

场景: 三个收缩项目，宽度分别为： 100px 、 200px 、 300px ，它们的 flex-shrink 值分别 为： 1 、 2 、 3 若想刚好容纳下三个项目，需要总宽度为 600px ，但目前容器只有 300px ，还差 300px 所以每个人都要收缩一下才可以放下.

计算规则：

  1. 计算分母： (100×1) + (200×2) + (300×3) = 1200
  2. 计算比例：
    • 项目一： (100×1) / 1200 = 比例值1
    • 项目二： (200×2) / 1200 = 比例值2
    • 项目三： (300×3) / 1200 = 比例值3
  3. 计算最终收缩大小：
    • 项目一需要收缩： 比例值1 × 300
    • 项目二需要收缩： 比例值2 × 300
    • 项目三需要收缩： 比例值3 × 300

2. flex-basis

flex-basis 设置的是主轴方向的基准长度，会让宽度或高度失效。默认值是auto,伸缩项目的宽或高. 浏览器根据这个属性设置的值，计算主轴上是否有多余空间.

如果主轴方向是水平, 宽度失效 ; 如果主轴是垂直,高度失效.

二、左侧浮动,右侧BFC

html:

<body>
<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>

css:

html,body{
    margin: 0;
    height: 100%;
}
.container{
    height: 100%;
}
.left{
    width: 200px;
    height: 100%;
    float: left;
    background-color: skyblue;
}
.right{
    width: calc(100% - 200px);
    height: 100%;
    background-color: orangered;
    display: flow-root;
}

效果:

image.png

解释: 详见 BFC-排除外部浮动部分

三、 左侧浮动,右侧margin-left.

html:

<body>
<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>

css:

html,body{
    margin: 0;
    height: 100%;
}
.container{
    height: 100%;
}
/*左侧浮动*/
.left{
    width: 200px;
    height: 100%;
    float: left;
    background-color: skyblue;
}
/*右侧设置margin-left*/
.right{
    height: 100%;
    background-color: orangered;
    margin-left:200px;
}

四、利用absolute 定位

利用绝对定位和包含快, 父元素设置相对定位,子元素设置绝对定位, 右侧自适应元素的left设置为200px, right设置为0px

html:

<body>
<div class="container">
  <div class="floatDiv">left</div>
  <div class="normal">right</div>
</div>
</body>

css:

/*去掉默认样式*/
html,body{
    margin: 0;
}
html,body,.container{
    height: 100%;
}
.container{
    position: relative; /* 父元素设置相对定位称为子元素的包含块*/
}
.left{
    position: absolute; /* 子元素设置绝对定位 */
    width: 200px; /* 宽度为200*/
    left: 0;  /*left设置为0*/
    height: 100%;
    background-color: dodgerblue;
}

.right{
    position: absolute;
    left: 200px;
    right: 0; /*right 一定不能少，不然元素没有宽度*/
    height: 100%;
    background-color: orange;
}

总结: 熟练使用各种布局有利于解决实力开发中遇到的Bug .

avatar
文章
阅读
粉丝