css实现页面内容区撑满全屏（内容全屏自适应）

黄哇塞耶

于 2024-03-29 10:16:01 发布

阅读量258

点赞数 5

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/simpleMan8023/article/details/137132739

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实现效果

在这里插入图片描述

我刚开始想到的思路是左边内容使用浮动右边自适应

<div class="center_container clearfix">
            <div class="left_list">
                <p class="active_pp">数据统计</p>
                <p>标准规范</p>         
            </div>
            <div class="right_list">
              右边内容
            </div>
  </div>

.center_container{
    width: 1200px;
    margin:0 auto;
    height: 100%;
}
.left_list{
    float:left;
    height: 100%;
    min-height: calc(100vh - 330px);
    min-height: -moz-calc(100vh - 330px);
    min-height: -webkit-calc(100vh - 330px);
    width: 240px;
    background-color:#ffffff;
    padding-top: 32px;
    box-sizing: border-box;
}
.left_list p{
    height: 58px;
    line-height: 58px;
    font-size: 16px;
    color: #333333;
    text-align: center;
}

.right_list{
    background-color:#ffffff;
    height: 100%;
    min-height: calc(100vh - 330px);
    margin-left: 256px;
    padding: 30px 40px;
    box-sizing: border-box;
}

这样写完实现了默认内容区域铺满全屏了但是！！！！！当右边的内容超出默认高度之后高度变高了左边浮动栏不会自适应变高~ 很难受
在这里插入图片描述
然后我使用了第二个办法成功解决那就是使用 position定位

 <div class="center_container">
            <div class="left_list">
                <p class="active_pp">数据统计</p>
                <p>标准111</p>
   
            </div>
            <div class="right_list">
            右边内容区
            </div>
  </div>

.center_container{
    width: 1200px;
    margin:0 auto;
    position: relative;
    height: 100%;
}
.left_list{
    position: absolute;
    height: 100%;
    min-height: calc(100vh - 330px);
    min-height: -moz-calc(100vh - 330px);
    min-height: -webkit-calc(100vh - 330px);
    width: 240px;
    background-color:#ffffff;
    padding-top: 32px;
    box-sizing: border-box;
}
.left_list p{
    height: 58px;
    line-height: 58px;
    font-size: 16px;
    color: #333333;
    text-align: center;
}

.right_list{
    background-color:#ffffff;
    height: 100%;
    min-height: calc(100vh - 330px);
    margin-left: 256px;
    padding: 30px 40px;
    box-sizing: border-box;
}