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

Posted 名字不好起啊

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页面布局:左侧固定,右侧自适应布局

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

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