CSS布局--左侧自适应母元素高度

 

平常项目中经常会遇到有左侧导航菜单的高度不固定，需要与母元素或右侧元素等高的情况，以前就自以为是的使用js来设置，不仅不方便还会出现各种bug，后来就突然想到了一个好方法。有可能这方法已经被其他人用烂了，但还是在这里献丑分享出来，希望和大家一起探讨学习。

先请看示例：

• 菜单1
• 菜单2
• 菜单3
• 菜单4
• 菜单5
• 菜单6

 

            
                <div class="parent">
                    <div class="left">
                        <ul>
                            <li>菜单1</li>
                            <li>菜单2</li>
                            <li>菜单3</li>
                            <li>菜单4</li>
                            <li>菜单5</li>
                            <li>菜单6</li>
                        </ul>
                    </div>
                    <div class="right">
                        <textarea></textarea>
                    </div>
                </div>
            
        

这个示例看起来是一个简单的左右布局，但因为左侧有一个背景色，需要与母元素等高，所以有些不同。这里的textarea只是利用它resize来使容器高度发生变化，没有其他用途。

以前可能会这样写，将母元素背景设置为淡灰色，子元素左右浮动，右侧元素背景为白色。但这样因为左右元素没有间距，在某些浏览器下缩放可能会换行。

我这里的方法是将左侧元素left绝对定位（position:absolute）,母元素parent相对定位（position:relative），并为母元素设置padding-left:left的宽度，然后让left高度height:100%,这样左侧元素left的高度就会跟着母元素变化。最好再为右侧元素或母元素设置一个min-height，因为左侧绝对定位不会撑开母元素。

当然这方法也是有缺点的，如果左侧元素高度会发生很大变化，比如有可展开隐藏的二级菜单，就可能超出母元素显示。希望大家视情况选择合适方法，也希望能提出改进建议。