css全屏左边容器固定宽度，右边自适应(4种方法整合)

最新推荐文章于 2024-06-17 10:49:59 发布

LUxxxX

最新推荐文章于 2024-06-17 10:49:59 发布

阅读量931

点赞数

分类专栏： CSS学习 Interview 文章标签： CSS

本文链接：https://blog.csdn.net/luxxxx/article/details/87724018

版权

Interview 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS学习

2 篇文章 0 订阅

订阅专栏

1.使用浮动(float)

html代码

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

css代码

html,body {
    height: 100%;
    padding: 0;
    margin:0;
}
.left{
    float: left;  /*左浮动*/
    width: 200px;
    height: 100%;
    background-color: red;
}
.right {
    height: 100%;
    background-color: blue;
    margin-left: -200px; /*没有这句也可以，div.left会覆盖住*/
}

2.使用绝对定位(absolute)

html代码(以下三种方法同用一个html)

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

css代码

html,body {
    height: 100%;
    padding: 0;
    margin:0;
}
.main {
	position: relative;
    height: 100%;
    width: 100%;
}
.left{
    position: absolute;
    width: 200px;
    height: 100%;
    background-color: red;
}
.right {
    height: 100%;
    background-color: blue;
    margin-left: 200px;
}

3.使用弹性布局(flex)

css代码

html,body {
    height: 100%;
    padding: 0;
    margin:0;
}
.main {
    display: flex;/*容器内的内容自动横向排列*/
    height: 100%;
    width: 100%;
}
.left {
    width: 200px;
    height: 100%;
    background-color: red;
}
.right {
    flex: 1; /*剩余内容默认占满*/
    height: 100%;
    background-color: blue;
}

4.使用网格布局(gird)

css代码

html,body {
    height: 100%;
    padding: 0;
    margin:0;
}
.main {
    display: grid;
    grid-template-columns: 200px auto;
    height: 100%;
}
.left {
    height: 100%;
    background-color: red;
}
.right {
    height: 100%;
    background-color: blue;
}