左侧容器高度随着右侧容器的高度改变而改变（适用于左侧为菜单导航，右侧显示内容区域）（兼容ie浏览器）

最新推荐文章于 2023-01-09 14:03:26 发布

luckydie

最新推荐文章于 2023-01-09 14:03:26 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签：高度自适应

本文链接：https://blog.csdn.net/luckydie/article/details/86646985

版权

前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

1、本方法主要的精髓在于

父容器设置position:relative

左侧子容器设置absolute height:100%，

这样就可以在父容器高度自适应的同时，

左侧容器的高度也能随之改变，

适用于左侧导航，右侧为内容区的情况。

该方法兼容ie浏览器

2、第二种方法：不兼容ie，在ie中出现无限滚动条

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

.container {width:960px; height:100%; overflow:hidden; margin:0 auto;}
.left {height:100%; width:200px; overflow:hidden; padding-bottom:9999px; 
        margin-bottom:-9999px; float:left; display:inline;}
.right {width:750px; float:right; height:auto;}