平常项目中经常会遇到有左侧导航菜单的高度不固定,需要与母元素或右侧元素等高的情况,以前就自以为是的使用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,因为左侧绝对定位不会撑开母元素。

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

CSS布局--左侧自适应母元素高度的更多相关文章

  1. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  2. CSS布局 -- 左侧定宽,右侧自适应

    左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...

  3. css布局-内容自适应屏幕

    css页面布局,实现内容部分自适应屏幕,当内容高度小于浏览器窗口高度时,页脚在浏览器窗口底部:当内容高度高于浏览器窗口高度时,页脚自动被撑到页面底部. <style type="tex ...

  4. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  5. css布局宽度自适应

    随着各种终端的不断涌现,网页中的元素适应不同的分辨率变得特别重要,根据经验,涉及到宽度自适应的一共有四种情况: 左端固定,右边自适应:右端固定,左边自适应:两端固定,中间自适应:中间固定,两端自适应. ...

  6. 纯css实现宽度自适应,高度与宽度成比例

    html: <div></div> css div{ width: 33.33%; box-sizing: border-box; float: left; position: ...

  7. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  8. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  9. 典型的DIV CSS三行二列居中高度自适应布局

    如何使整个页面内容居中,如何使高度适应内容自动伸缩.这是学习CSS布局最常见的问题.下面就给出一个实际的例子,并详细解释.(本文的经验和是蓝色理想论坛xpoint.guoshuang共同讨论得出的.) ...

随机推荐

  1. Django的命令

    安装django          : pip install django 创建django项目   :django-admin startproject projectname 启动django项 ...

  2. HSV颜色模型

    HSV(Hue, Saturation, Value)是根据颜色的直观特性由A. R. Smith在1978年创建的一种颜色空间, 也称六角锥体模型(Hexcone Model). 注意的是OpenC ...

  3. 2017.1-TOP5 Android开源库

    Colorful (Github) Colorful简单实用,通过这个开源库可以通过编码的方式来改变应用的主题,不再需要定义不同的style dependencies { compile 'com.g ...

  4. Day2:购物车小程序

    一.购物车小程序第一版 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan product_list = [ (&quo ...

  5. ThreadPoolExecutor – Java Thread Pool Example(java线程池创建和使用)

    Java thread pool manages the pool of worker threads, it contains a queue that keeps tasks waiting to ...

  6. UVA 10917 Walk Through the Forest SPFA

    uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&problem= ...

  7. 2.CCGridAction(3D效果),3D反转特效,凸透镜特效,液体特效,3D翻页特效,水波纹特效,3D晃动的特效,扭曲旋转特效,波动特效,3D波动特效

     1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...

  8. [TypeStyle] Reusable styles using TypeStyle mixins

    TypeStyle’s style function allows you to give multiple objects as an argument. This provides a simpl ...

  9. 微服务API模拟框架frock介绍

    本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2016/02/introducing-frock Urban Airship是一家帮助 ...

  10. JavaScript中BOOLEAN类型之三种情景代码举例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...