网页布局——左侧固定，右侧自适应

本文转载自查看原文 2019-04-23 16:11 594 css

第一种方法：采用绝对定位+BFC（overflow:auto）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
        .right{
            height: 200px;
            margin-left: 200px;
            background: blue;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="left">左边</div>
    <div class="right">右边</div>
</body>
</html>

第二种方法：采用左浮动+BFC（overflow:auto）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .right{
            height: 200px;
            background: blue;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="left">左边</div>
    <div class="right">右边</div>
</body>
</html>

第三种方法：采用flex布局+BFC（overflow:auto）（推荐使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            display: flex;
        }
        .left{
            width: 200px;
            height: 200px;
            background: red;
        }
        .right{
            height: 200px;
            background: blue;
            flex: 1;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
</body>
</html>

第四种：table布局（高度会自动撑开）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main {
            display: table;
            width: 100%;
        }
        .left ,.right {
            display:table-cell;
            height:240px; 
        }
        .right{
            background-color: blue;
        }
        .left {
            width: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="main">
      <div class="left" >左边</div>
      <div class="right" >右边</div>
    </div>
</body>
</html>

第五种：grid网格布局+BFC(overflow:auto)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main {
            display: grid;
            width: 100%;
            grid-template-rows: 200px;  /*设置行高*/
            grid-template-columns: 200px auto;  /*设置列数属性*/
        }
        .right{
            background-color: blue;
        }
        .left {
            background-color: red;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="main">
      <div class="left" >左边</div>
      <div class="right" >右边</div>
    </div>
</body>
</html>

如果不触发BFC，如果右边内容超出右边盒子的高度会出现内容往左边靠和溢出的情况

第一种情况：浮动

第二种情况：绝对定位，flex布局，grid网格布局

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css实现两栏布局，左侧固定宽，右侧自适应的7中方法 CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法 7种方法实现CSS左侧固定，右侧自适应布局 css实现右侧固定宽度，左侧宽度自适应使用css3的flex盒模型来实现两栏布局（左侧固定宽度，右侧自适应宽度） css左侧固定宽度，右侧自适应的几种实现方法 css 左侧高度跟随右侧内容高度自适应两边固定中间自适应布局 CSS3+HTML5特效8 - 顶部和右侧固定，左侧随窗口变化的布局 Flex布局实现头尾固定、中间内容自适应