----------------------------------------------------------------------

原因是： height:100% 引起的， 这句话的意思是，子元素的高度为父元素高度的100%，也就是和父元素（容器）的高度相等。

这样当父元素中有两个块级子元素时，假设父元素高度300px, 如果第一个子元素的高度是100，第二个子元素的高度是100%（即300px），则两个子元素的高度加起来就是100+300=400px,超出了父元素的高度。就会出现上面的现象了，就会出现滚动条了！！！！（所以，任何现象背后总是有原因存在的，我们要做的就是耐心的寻找到原因，然后就可以解决了）

-----------------------------------------------------------------------------------------------------------------

  1. <!DOCTYPE html>
  2. <html >
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <style>
  6.         *{height: 100%;}
  7.         .box{height: 100px; width: 100px;}
  8.         .flex{display: flex; flex-direction: column;}
  9.         .left{flex:1;}
  10.     </style>
  11. </head>
  12. <body>
  13.     <div class="flex" style="width: 300px; height: 300px; border: 1px solid black; ">
  14.         <div class="right box" style="height: 100px; background-color:yellow;">menu</div>
  15.         <div class="left box" style="height: 100%; background-color:green;">content</div>
  16.     </div>
  17. </body>
  18. </html>

　　参考：

　　css3 垂直方向元素占据所有剩余空间 http://www.jianshu.com/p/5e0765410467

html中布局，让下一个子元素占据剩余的高度的更多相关文章

  1. Flutter学习笔记（23）--多个子元素的布局Widget（Rwo、Column、Stack、IndexedStack、Table、Wrap）

    如需转载,请注明出处:Flutter学习笔记(23)--多个子元素的布局Widget(Rwo.Column.Stack.IndexedStack.Table.Wrap) 上一篇梳理了拥有单个子元素布局 ...

  2. Flutter学习笔记（22）--单个子元素的布局Widget（Container、Padding、Center、Align、FittedBox、Offstage、LimitedBox、OverflowBox、SizedBox）

    如需转载,请注明出处:Flutter学习笔记(22)--单个子元素的布局Widget(Container.Padding.Center.Align.FittedBox.Offstage.Limited ...

  3. js jquery获取当前元素的兄弟级 上一个 下一个元素 jquery如何获取第一个或最后一个子元素

    var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSbiling;   //获得 ...

  4. DOM: 如何获取元素下的第一个子元素

    Element.firstChild ?,是的,这是第一种方法,当然,通常来说支持 W3C 规范的浏览器,如 Firefox 等取到的应该是 TEXT_NODE.很早之前,或者说现在最流行的方法可能是 ...

  5. Atitit.100% 多个子元素自适应布局属性

    Atitit.100% 多个子元素自适应布局属性 1.1. 原理1 1.2. Table布局1 1.3. Css布局1 1.4. 判断amazui加载完毕2 1.1. 原理 每个子元素平均分配,但是有 ...

  6. jquery如何获取第一个或最后一个子元素？

    通过children方法,children("input:first-child") 1 2 $(this).children("input:first-child&qu ...

  7. jQuery中的选择器(下)

    这一篇主要写过滤选择器和表单选择器 在这里,我不再已表格形式说明(自己太懒了),主要以文字形式说明一下每个选择器的作用描述.  3.过滤选择器 过滤选择器主要是通过特定的过滤规则筛选出所需的DOM元素 ...

  8. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  9. 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

随机推荐

  1. Farseer.net轻量级开源框架 中级篇：常用的扩展方法

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 中级篇: BasePage.BaseController.BaseHandler.BaseM ...

  2. CREATE LANGUAGE - 定义一种新的过程语言

    SYNOPSIS CREATE [ TRUSTED ] [ PROCEDURAL ] LANGUAGE name HANDLER call_handler [ VALIDATOR valfunctio ...

  3. cmanformat - 不是命令啦，是个演示文件

    描述 DESCRIPTION cmanformat 是 man pages 格式的演示文件. 由于系统不同会有差异.在 XWindow 下会好些. __________________________ ...

  4. 双引号" "和单引号' '区别

    双引号是字符串,单引号是字符 “\n”与'\n': 相同点: 都能起到换行作用     不同点: "\n" <=> {'\n', '\0'} '\n' <=> ...

  5. genymotion 双击打开后 图标只显示在任务栏 无法在电脑上显示

    解决办法 删除 c:/users/user/AppData/local/Genymobile  例如:C:\Users\lenovo\AppData\Local\Genymobile 删除注册表:HK ...

  6. Insert 语句对 nologging 与 logging表 在不同场景下的优化

    前言 前段时间报表数据库上有条insert sql语句,插入的大量数据,执行非常慢,需要对其进行分析优化. 分析步骤是在:ARCHIVE与NOARCHIVE模式下进行. 测试场景: 分别对表的常规插入 ...

  7. 升级openssh踩得坑

    升级背景: 项目中使用的系统为CentOS6.8,经过漏洞扫描后发现openssh高危漏洞,具体描述如下:OpenSSH 7.2p2之前版本, sshd/ session.c/ do_setup_en ...

  8. JavaScript中整型数据使用

    JavaScript中整型数据使用 制作人:全心全意 JavaScript的数字格式允许精确地表示-900719925474092(-253)和900719925474092(253)之间的所有整数, ...

  9. Buffer.from(arrayBuffer[, byteOffset[, length]])

    Buffer.from(arrayBuffer[, byteOffset[, length]]) arrayBuffer - 一个 TypedArray 或 new ArrayBuffer() 的 . ...

  10. python中基于tcp协议的通信（数据传输）

    tcp协议:流式协议(以数据流的形式通信传输).安全协议(收发信息都需收到确认信息才能完成收发,是一种双向通道的通信) tcp协议在OSI七层协议中属于传输层,它上承用户层的数据收发,下启网络层.数据 ...