zoukankan      html  css  js  c++  java
  • 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,因为左侧绝对定位不会撑开母元素。

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

  • 相关阅读:
    Spring声明式事务配置
    spring注解注入:<context:component-scan>详解
    MySQL添加用户、删除用户与授权
    Mysql 分页语句Limit用法
    Java内存泄露的理解与解决
    eclipse的设置和优化
    从svn删除文件夹和文件
    权限管理设计
    Linux Tomcat 6.0安装配置实践总结
    Java 继承
  • 原文地址:https://www.cnblogs.com/0liaoyi/p/6378644.html
Copyright © 2011-2022 走看看