css代码：

.wrap{width:600px;margin:0 auto; overflow:hidden;}

.left{background:#ccc;width:300px;float:left;margin-bottom:-10000px;padding-bottom:10000px;}

.right{background:#eee;width:300px;float:left;margin-bottom:-10000px;padding-bottom:10000px;}

html 代码：<div class="wrap"><div class="left">左侧</div>< div class="right">右侧<br />右侧<br />右侧<br />右侧< /div></div>

说明：通过控制margin-bottom:-10000px;padding-bottom:10000px;这个样式，达到左右高度一致，实际上两边的高度在10000px范围内都可以保持一致，可以设置更高。

css控制父元素下的子元素自适应高度，且高度一致的更多相关文章

  1. jquery层级原则器（匹配父元素下的子元素）

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

  2. stylus选中hover元素的兄弟元素下的子元素

    stylus设置兄弟元素样式:鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ . ...

  3. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  4. CSS实现父元素半透明，子元素不透明

    CSS实现父元素半透明,子元素不透明. 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明 ...

  5. 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG

    在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...

  6. AngularJs中，如何在父元素中调用子元素为自定义Directive中定义的函数？

    最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...

  7. css 选择其父元素下的某个元素

    一,选择器 :first-child   p:first-child(first第一个 child子元素)(找第一个子元素为p) :last-child    p:last-child(last倒数 ...

  8. 当fixed元素相互嵌套时，父元素会影响子元素的层叠关系，最好不要嵌套使用fixed

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...

  9. 父元素设置min-height子元素设置100%问题

    问题:父元素设置min-height子元素高度设置100%取不到值,这是因为子元素 div设置 height:100%: 只有当父级元素满足min-height:1000px;设置的条件才触发: 浏览 ...

随机推荐

  1. 【设计模式：单例模式】使用单例模式载入properties文件

    先准备測试程序: package org.jediael.util; import static org.junit.Assert.*; import org.junit.Test; public c ...

  2. Unity之极光推送

    Android应用中大多数应用使用了推送,游戏中当然也可以使用推送!下面在Unity3D做个测试!(下面是客套话,大家可以忽略) 1.1 什么是推送技术? 推送技术,又名反向AJAX,指的是一种基于I ...

  3. Linux Tomcat7.0安装配置实践总结

    一,安装JDk 先下载jdk,链接http://www.oracle.com/technetwork/java/javase/downloads/index.html,选择相对应平台的JDK.由于笔者 ...

  4. Android SQLite的使用1（非原创）

    1.继承SQLiteOpenHelper :public class MyOpenHelper extends SQLiteOpenHelper {} 2.重写下面3个方法 package com.e ...

  5. B - A + B Again

    Description There must be many A + B problems in our HDOJ , now a new one is coming.         Give yo ...

  6. VS 2013驱动开发 + Windbg + VM双机调试（亲测+详解）

    ------------VS 2013驱动开发 + Windbg + VM双机调试(亲测+详解)------------- WIN10已上线,随之而来的是VS2015:微软在 "WDK760 ...

  7. 龙芯3A上V8的编译与测试

    使用平台: loongson3a+debian6.0.3+linux2.6.36.3+gcc4.6.3 一: V8的下载 这里V8是从其官网上使用git下载的: (1)如果没有git和git-svn需 ...

  8. Fragment之一：Fragment入门

    参考自张泽华视频 Fragment是自Android3.0后引入的特性,主要用于在不同的屏幕尺寸中展现不同的内容. Fragment必须被嵌入Activity中使用,总是作为Activity的组成部分 ...

  9. maven命令/依赖/聚合

    一,编写pom.xml   首先我们看一下pom.xml   <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns ...

  10. Sublime Text2 快捷键设置

    设置Tab两个空格: 点击 Preference -> Settings-User "tab_size":2, "translate_tabs_to_spaces& ...