实现CSS左侧固定，右侧自适应布局

最新推荐文章于 2023-08-13 09:34:53 发布

weixin_43017935

最新推荐文章于 2023-08-13 09:34:53 发布

阅读量331

点赞数

分类专栏：前端 css 文章标签： css布局左固定右自适应

本文链接：https://blog.csdn.net/weixin_43017935/article/details/88286099

版权

本文介绍如何使用CSS实现左侧栏固定宽度，右侧栏根据屏幕大小自适应的布局方式。重点在于利用`box-sizing: border-box`属性来达到理想的布局效果，兼容IE8+浏览器。

摘要由CSDN通过智能技术生成

网上有很多相关内容，废话不多说。附上相关内容 caicai1171523597的实现CSS左侧固定，右侧自适应布局

补充一个个人认为比较好的：兼容ie8+，纯css，可直接浏览器打开。
本人思路关键是采用了box-sizing: border-box

<!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>
        div {
            height: 50px;
            box-sizing: border-box;
        }

        body {
            margin: 0;
            /* 初始化 */
        }

        .a {
            width: 50px;
            background-color: #f00;
            position: absolute;
            left: 0;
            top: 0;
            /*可使用float：left替代*/
            /* z-index: