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

Posted 2020-10-11 名字不好起啊

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了左侧区域固定，右侧区域自适应相关的知识，希望对你有一定的参考价值。

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

　　浏览博问时看到了一个 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>

以上是关于左侧区域固定，右侧区域自适应的主要内容，如果未能解决你的问题，请参考以下文章

两栏布局——左侧固定右侧自适应

左侧固定右侧自适应

flex左侧固定宽度，右侧自适应布局

python测试开发django-134.CSS页面布局：左侧固定，右侧自适应布局

左侧固定,右侧自适应的布局

左侧固定，右侧自适应布局