三种三栏网页宽度自适应布局方法

最新推荐文章于 2022-08-18 09:49:53 发布

frank201113

最新推荐文章于 2022-08-18 09:49:53 发布

阅读量925

点赞数

分类专栏： frontend 文章标签： css 自适应布局

本文链接：https://blog.csdn.net/Handsome_fan/article/details/81587975

版权

frontend 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

三栏网页宽度自适应的布局在网页中非常的常见，这里总结了三种实现三栏网页宽度自适应布局的方法，一种是绝对定位法，另一种是margin负值法，最后一种是自身浮动法。

绝对定位法

绝对定位法的原理比较简单，代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html, body {
      margin: 0;
      height: 100%; /* 要设置100%的高度才能撑满整屏高度 */
    }

    #left, #right {
      position: absolute;
      top: 0;
      width: 200px;
      height: 100%; /* 继承自body高度 */
    }

    #left {
      left: 0;
      background: #a0b3d6;      
    }

    #right {
      right: 0;
      background: #a0b3d6;
    }

    #main {
      margin: 0 210px;
      background: #ffe6b8;
      height: 100%; /* 继承自body高度 */
    }
  </style>
</head>
<body>
  <div id="left"></div>
  <div id="main"></div>
  <div id="right"></div>
</body>
</html>

margin负值法

margin负值法是相对复杂的方法，我在代码中总结了实现的步骤，代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html, body {
      margin: 0;
      height: 100%; /* 1.要设置html和body的告诉为100%, 让#main #left #right继承 */
    }

    #main {
      float: left; /* 2.设置#main #left #right左浮动 */
      height: 100%;
      width: 100%; /* 3.要设置#main的width属性为100%, 否则会由于#left与#right设置了浮动的缘故而被挤压 */
    }

    #main #body {
      margin: 0 210px;    
      background: #17A05E;
      height: 100%;
    }

    #left, #right {
      float: left;
      width: 200px;
      background: #007ACC;
      height: 100%;
    }

    #left {
      margin-left: -100%; /* 4.由于#main设置了100%的width值, 所以可以使得#left值定位到左侧 */
    }

    #right {
      margin-left: -200px; /* 5.会使元素向左走 */
    }
  </style>
</head>
<body>
  <div id="main">
    <div id="body">中</div>
  </div>
  <div id="left">左</div>
  <div id="right">右</div>
</body>
</html>

自身浮动法

自身浮动法也是相对简单的方法，原理就是左栏左浮动，右栏右浮动，中间的元素要注意放在最后面。代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  html, body {
    margin: 0;
    height: 100%;
  }

  #main {
    height: 100%;
    margin: 0 210px;
    background: #ffe6b8;
  }

  #left, #right {
    width: 200px;
    height: 100%;
    background: #a0b3d6;
  }

  #left {
    float: left;
  }

  #right {
    float: right;
  }
  </style>
</head>
<body>
  <div id="left">左</div>
  <div id="right">右</div>
  <div id="main">中</div>
</body>
</html>