用css实现一个左右布局，右边固定300px宽，高度顶满，左边撑开顶满剩余位置

最新推荐文章于 2024-04-07 21:56:11 发布

迷糊糊于

最新推荐文章于 2024-04-07 21:56:11 发布

阅读量367

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_63525451/article/details/130029729

版权

先设置一个大盒子包裹两个小盒子

<body>
    <div class="big">
        <div class="wrapper">左边</div>
        <div class="you">右边</div>
    </div>
    

</body>

然后设置样式

<style>
        //取消浏览器的边框，充满整个屏幕
        *{
            margin: 0;
            padding: 0;
        }
        //html页面适应屏幕
        html,body{
            height: 100%;
            width: 100%;
        }
        //大盒子充满整个屏幕
        .big{
            height: 100%;
            width: 100%;
            background-color: brown;
            
        }
        //设置左右盒子，左边盒子左浮动
        .wrapper{
            height: 100%;
            width: 100%;
            
            background-color: lightskyblue;
            float: left;
            
        }
        //右边盒子绝对定位，右边距设置为0
        .you{
            height: 100%;
            width: 300px;
            background-color: blue;
            
            right: 0;
            display: inline-block;
            position: absolute;
        }
        
        
  </style>