liang14658fox

Appearance

通过Flex布局实现左Div固定，右Div自适应填满父元素宽度 ​

html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container-father">
    <div class="container">
      <div class="fixed">固定宽度</div>
      <div class="flexible">填满剩余区域</div>
    </div>
  </div>

</body>
<style>
  .container-father {
    background-color: #cccccc;
    width: 100%;
    height: 1000px;
  }

  .container {
    display: flex;
    width: 100%;
    /* 确保容器占满父元素 */
  }

  .fixed {
    width: 200px;
    background-color: lightblue;
    border: 1px solid red;
  }

  .flexible {
    flex-grow: 1;
    /* 让其填满剩余空间 */
    background-color: lightgreen;
    border: 1px solid purple;
  }
</style>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container-father">
    <div class="container">
      <div class="fixed">固定宽度</div>
      <div class="flexible">填满剩余区域</div>
    </div>
  </div>

</body>
<style>
  .container-father {
    background-color: #cccccc;
    width: 100%;
    height: 1000px;
  }

  .container {
    display: flex;
    width: 100%;
    /* 确保容器占满父元素 */
  }

  .fixed {
    width: 200px;
    background-color: lightblue;
    border: 1px solid red;
  }

  .flexible {
    flex-grow: 1;
    /* 让其填满剩余空间 */
    background-color: lightgreen;
    border: 1px solid purple;
  }
</style>

</html>

CTRL+鼠标滚轮滚动缩放时，右侧Div宽度不能自适应恢复的问题

解决方案，给右侧子Div添加如下属性：

css
.flexible {
flex-grow: 1;
min-width: 0; /* 允许它缩小和重新变大 */
overflow: hidden; /* 触发浏览器重新计算 */
will-change: width; /* 优化渲染 */
}
.flexible {
flex-grow: 1;
min-width: 0; /* 允许它缩小和重新变大 */
overflow: hidden; /* 触发浏览器重新计算 */
will-change: width; /* 优化渲染 */
}

使用flex实现圣杯布局 ​

html
<div class="container">
    <div class=" fixed-width">
        宽度固定200px
    </div>
    <div class=" flex-grow">
        宽度自适应
    </div>
    <div class=" fixed-width">
        宽度固定200px
    </div>
</div>
<div class="container">
    <div class=" fixed-width">
        宽度固定200px
    </div>
    <div class=" flex-grow">
        宽度自适应
    </div>
    <div class=" fixed-width">
        宽度固定200px
    </div>
</div>
css
div {
    height: 100px;
    border: 1px solid black;
}

.container {
    display: flex;
}

.fixed-width {
    width: 200px;
}

.flex-grow {
    flex-grow: 1;
}
div {
    height: 100px;
    border: 1px solid black;
}

.container {
    display: flex;
}

.fixed-width {
    width: 200px;
}

.flex-grow {
    flex-grow: 1;
}

使用绝对定位实现圣杯布局 ​

html
<div class="container-absolute">
    <div class=" fixed-width-left">
        宽度固定200px
    </div>
    <div class=" flex-grow-absolute">
        宽度自适应
    </div>
    <div class=" fixed-width-right">
        宽度固定200px
    </div>
</div>
<div class="container-absolute">
    <div class=" fixed-width-left">
        宽度固定200px
    </div>
    <div class=" flex-grow-absolute">
        宽度自适应
    </div>
    <div class=" fixed-width-right">
        宽度固定200px
    </div>
</div>
css
div {
    height: 100px;
    border: 1px solid black;
}

.container-absolute {
    position: relative;
}

.fixed-width-left {
    width: 200px;
}

.flex-grow-absolute {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 200px;
    right: 200px;
}

.fixed-width-right {
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 200px;
}
div {
    height: 100px;
    border: 1px solid black;
}

.container-absolute {
    position: relative;
}

.fixed-width-left {
    width: 200px;
}

.flex-grow-absolute {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 200px;
    right: 200px;
}

.fixed-width-right {
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 200px;
}

绝对定位圣杯布局 + flex完美布局 ​

WARNING

如果使用flex实现的圣杯布局中间区域内如果内置flex完美布局，将会导致圣杯布局两侧元素被挤压。