左侧区域固定，右侧区域自适应

　　发现好玩的问题，思考并解答是一个很快乐的过程~

　　浏览博问时看到了一个 div + css 布局问题，需要左侧区域宽度固定，右侧区域自动填满。

　　这样的需求有时候会在项目中遇到，正巧碰见了做个记录以备后用。

　　有很多的结题思路，这里先说一个立马想到的解决方法：

　　1、想要实现左侧固定很好办，直接给固定 width 就好了。

　　2、而右侧的宽度自适应，又不能通过 jquery 来获取宽度计算并设置，那就只能通过 width 100% 来设置。

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <style>
            .leftPart {
                background: grey;
                width: 400px;
                height: 200px;
            }
            .rightPart {
                height: 200px;
                background: black;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class='leftPart'></div>
        <div class='rightPart'></div>
        <script>

        </script>
    </body>
</html>
复制代码

　　3、那为了使他俩一行，就得对一个做 position absolute 处理，当然要 position 固定宽度的啦！给他加一个 position 属性。

.leftPart {
    position:absolute;
}

　　4、一行了之后，右侧内容要与左侧内容分开，那就得右侧加个padding-left 来将左侧区域的位置让出来。多加 10px 给点距离。

.rightPart {
    padding-left: 410px;
}

　　5、这样还不美，那右侧怎样才能向左侧区域独立出来呢，万一里面元素要position 啥的不还得算padding-left？那麻烦死了，于是乎在里面加个div，设置宽高 100%。这样右侧区域也独立出来了。

复制代码
<div class='rightPart'>
    <div class='rightContent'></div>
</div>

.rightPart {
    height: 200px;
    padding-left: 410px;
}
.rightContent {
    background: grey;
    width: 100%;
    height: 100%;
}
复制代码

　　最终我们实现出了效果：

　　完全代码：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <style>
            .leftPart {
                position:absolute;
                background: grey;
                width: 400px;
                height: 200px;
            }
            .rightPart {
                height: 200px;
                padding-left: 410px;
            }
            .rightContent {
                background: grey;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class='leftPart'></div>
        <div class='rightPart'>
            <div class='rightContent'></div>
        </div>
        <script>

        </script>
    </body>
</html>
复制代码

 

posted @   名字不好起啊  阅读(166)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手