平常项目中经常会遇到有左侧导航菜单的高度不固定,需要与母元素或右侧元素等高的情况,以前就自以为是的使用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. ajax获取服务器响应信息

    window.onload = function(){ document.getElementById('btn').onclick = function(){ var req = new XMLHt ...

  2. 【COGS1672】【SPOJ375】QTREE

    这是我的第一个边权链剖 COGS上和SPOJ有点不一样就是没有多组数据了本质还是一样的 我写的是COGS那个事实上改一改就能够去SPOJ AC了= -= (但是我如今上不去SPOJ卧槽(╯‵□′)╯︵ ...

  3. 【Java并发编程实战】-----“J.U.C”:CLH队列锁

    在前面介绍的几篇博客中总是提到CLH队列,在AQS中CLH队列是维护一组线程的严格依照FIFO的队列.他可以确保无饥饿,严格的先来先服务的公平性.下图是CLH队列节点的示意图: 在CLH队列的节点QN ...

  4. numpy,scipy,pandas 和 matplotlib

    numpy,scipy,pandas 和 matplotlib 本文会介绍numpy,scipy,pandas 和 matplotlib 的安装,环境为Windows10. 一般情况下,如果安装了Py ...

  5. Day1:第一个python小程序

    Day1:第一个python小程序与开发工具Pycharm 一.Hello World C:\Users\wenxh>python Python 3.6.2 (v3.6.2:5fd33b5, J ...

  6. GO语言学习(二)Windows 平台下 LiteIDE 的安装和使用

    1. 安装 Go 语言并设置环境变量 参考GO语言学习(一) 2. MinGW 的下载和安装 Windows 下的 Go 调试还需要安装 MinGW. 2.1 下载安装工具的安装 最新版本下载安装工具 ...

  7. HDU 1997汉诺塔VII

    又是汉诺塔~ 回顾一下汉诺塔的移动过程. 从左到右设为A,B,C  3个盘子的时候 1: No.1  A -> C 2: No.2  A -> B 3: No.1  C -> B 4 ...

  8. IOS基础:深入理解Objective-c中@class 和#import的区别

    在面向对象objective-C语言中,当一个类使用到另一个类时,并且在类的头文件中需要创建被引用的指针时,可以#import方式引入,通过@class引入: 这两种的方式的区别在于: 1.运用#im ...

  9. 嵌入式arm linux环境中gdb+gdbserver调试

    一.前言嵌入式Linux系统中,应用开发过程中,很多情况下,用户需要对一个应用程序进行反复调试,特别是复杂的程序.采用GDB方法调试,由于嵌入式系统资源有限性,一般不能直接在目标系统上进行调试,通常采 ...

  10. 安装GDB和GDBSERVER

    安装GDB和GDBSERVER 转自http://www.360doc.com/content/10/0407/17/155970_21971613.shtml 把GDBSERVER装入文件系统 转自 ...