div自适应填充剩余宽度的方法

最新推荐文章于 2025-05-19 11:03:57 发布

weixin_33963189

最新推荐文章于 2025-05-19 11:03:57 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5b45a4716fb9a04fa13f2069

本文介绍了一种网页布局方法，通过简单的CSS样式设置实现左侧div宽度固定，右侧div自适应剩余宽度的效果。该布局适用于需要固定侧边栏而主体内容区域随窗口大小变化的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两个div，左侧div宽度固定，右侧div自适应填满剩下的宽度。

直接上代码↓

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
    <style type="text/css">
        #wrap{
            padding-left: 200px;
        }
        .leftpart{
            float:left;
            width:200px;
            margin-left:-200px;
            height: 200px;
            background-color:lightgreen;
        }
        .rightpart{
            float: right;
            width: 100%;
            height: 200px;
            background-color: lightseagreen;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div class="rightpart">宽度自适应部分</div>
    <div class="leftpart">width200的左边栏</div>
</div>
</body>
</html>
复制代码

效果如图