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

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

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

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

<!DOCTYPE html>

<html >

<head>

    <meta charset="utf-8"/>

    <style>

        *{height: 100%;}

        .box{height: 100px; width: 100px;}

        .flex{display: flex; flex-direction: column;}

        .left{flex:1;}

    </style>

</head>

<body>

    <div class="flex" style="width: 300px; height: 300px; border: 1px solid black; ">

        <div class="right box" style="height: 100px; background-color:yellow;">menu</div>

        <div class="left box" style="height: 100%; background-color:green;">content</div>

    </div>

</body>

</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轻量级ORM开源框架 V1.0 开发目标

    本篇主要给大家说明下在V1.0中,计划开发的任务的状态.按照国际惯例.上大表格 开发计划状态 编号 模块 状态 说明 1  分离Utils.Extend.UI  √  在V0.2版本中,是集成在一个项 ...

  2. wdcp 打开网页显示 Apache 2 Test Page powered by CentOS -- 来自辉哥博客

    是因为更新过系统,安装并更新了系统自带的apache 执行这个命令即可 #ln -sf /www/wdlinux/init.d/httpd /etc/rc.d/init.d/httpd#reboot ...

  3. count() 方法

    count() :方法用于统计字符串里某个字符出现的次数.可选参数为在字符串搜索的开始与结束位置. num1,num2 = input('请输入字符串:'),input('请输入要查询的子串:') p ...

  4. 第2节 hive基本操作：11、hive当中的分桶表以及修改表删除表数据加载数据导出等

    分桶表 将数据按照指定的字段进行分成多个桶中去,说白了就是将数据按照字段进行划分,可以将数据按照字段划分到多个文件当中去 开启hive的桶表功能 set hive.enforce.bucketing= ...

  5. show（）的几种方法

    1 show()方法和hide()方法 $("selector").show()  从display:none还原元素默认或已设置的display属性$("selecto ...

  6. [Python3网络爬虫开发实战] 1.9.3-Scrapyd-Client的安装

    在将Scrapy代码部署到远程Scrapyd的时候,第一步就是要将代码打包为EGG文件,其次需要将EGG文件上传到远程主机.这个过程如果用程序来实现,也是完全可以的,但是我们并不需要做这些工作,因为S ...

  7. linux性能优化cpu-01性能指标

    学习性能优化的第一步,一定要了解性能指标. 性能指标是什么? 当我们看到性能指标时一定先想到“高并发”.“响应快”,这个两个指标也对应着性能优化的两个核心指标—— “吞吐率”和“低延迟”. 这两个指标 ...

  8. 搭建分布式yarn

    1.在前一篇准备好Hadoop的基础上配置,链接 http://www.cnblogs.com/cici20166/p/6266367.html 2./etc/profile 配置环境变量 expor ...

  9. （蓝桥杯）2018JAVA B组 日志分析

    日志统计 小明维护着一个程序员论坛.现在他收集了一份"点赞"日志,日志共有N行.其中每一行的格式是: ts id 表示在ts时刻编号id的帖子收到一个"赞". ...

  10. Python 字典（2）

    一.遍历字典 一个字典可能会包含多个键-值对,字典可以以多种方式存储信息,因此有多种遍历字典的方式,比如键-值对.键.值. 1.遍历所有的键-值对 user_01 = {'username':'tiz ...