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

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

　　浏览博问时看到了一个 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 @ 2017-10-20 11:13  名字不好起啊  阅读(165)  评论(0)  编辑  收藏  举报