html中布局,让下一个子元素占据剩余的高度
----------------------------------------------------------------------
原因是: 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中布局,让下一个子元素占据剩余的高度的更多相关文章
- Flutter学习笔记(23)--多个子元素的布局Widget(Rwo、Column、Stack、IndexedStack、Table、Wrap)
如需转载,请注明出处:Flutter学习笔记(23)--多个子元素的布局Widget(Rwo.Column.Stack.IndexedStack.Table.Wrap) 上一篇梳理了拥有单个子元素布局 ...
- Flutter学习笔记(22)--单个子元素的布局Widget(Container、Padding、Center、Align、FittedBox、Offstage、LimitedBox、OverflowBox、SizedBox)
如需转载,请注明出处:Flutter学习笔记(22)--单个子元素的布局Widget(Container.Padding.Center.Align.FittedBox.Offstage.Limited ...
- js jquery获取当前元素的兄弟级 上一个 下一个元素 jquery如何获取第一个或最后一个子元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
- DOM: 如何获取元素下的第一个子元素
Element.firstChild ?,是的,这是第一种方法,当然,通常来说支持 W3C 规范的浏览器,如 Firefox 等取到的应该是 TEXT_NODE.很早之前,或者说现在最流行的方法可能是 ...
- Atitit.100% 多个子元素自适应布局属性
Atitit.100% 多个子元素自适应布局属性 1.1. 原理1 1.2. Table布局1 1.3. Css布局1 1.4. 判断amazui加载完毕2 1.1. 原理 每个子元素平均分配,但是有 ...
- jquery如何获取第一个或最后一个子元素?
通过children方法,children("input:first-child") 1 2 $(this).children("input:first-child&qu ...
- jQuery中的选择器(下)
这一篇主要写过滤选择器和表单选择器 在这里,我不再已表格形式说明(自己太懒了),主要以文字形式说明一下每个选择器的作用描述. 3.过滤选择器 过滤选择器主要是通过特定的过滤规则筛选出所需的DOM元素 ...
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
随机推荐
- Farseer.net轻量级ORM开源框架 V1.0 开发目标
本篇主要给大家说明下在V1.0中,计划开发的任务的状态.按照国际惯例.上大表格 开发计划状态 编号 模块 状态 说明 1 分离Utils.Extend.UI √ 在V0.2版本中,是集成在一个项 ...
- wdcp 打开网页显示 Apache 2 Test Page powered by CentOS -- 来自辉哥博客
是因为更新过系统,安装并更新了系统自带的apache 执行这个命令即可 #ln -sf /www/wdlinux/init.d/httpd /etc/rc.d/init.d/httpd#reboot ...
- count() 方法
count() :方法用于统计字符串里某个字符出现的次数.可选参数为在字符串搜索的开始与结束位置. num1,num2 = input('请输入字符串:'),input('请输入要查询的子串:') p ...
- 第2节 hive基本操作:11、hive当中的分桶表以及修改表删除表数据加载数据导出等
分桶表 将数据按照指定的字段进行分成多个桶中去,说白了就是将数据按照字段进行划分,可以将数据按照字段划分到多个文件当中去 开启hive的桶表功能 set hive.enforce.bucketing= ...
- show()的几种方法
1 show()方法和hide()方法 $("selector").show() 从display:none还原元素默认或已设置的display属性$("selecto ...
- [Python3网络爬虫开发实战] 1.9.3-Scrapyd-Client的安装
在将Scrapy代码部署到远程Scrapyd的时候,第一步就是要将代码打包为EGG文件,其次需要将EGG文件上传到远程主机.这个过程如果用程序来实现,也是完全可以的,但是我们并不需要做这些工作,因为S ...
- linux性能优化cpu-01性能指标
学习性能优化的第一步,一定要了解性能指标. 性能指标是什么? 当我们看到性能指标时一定先想到“高并发”.“响应快”,这个两个指标也对应着性能优化的两个核心指标—— “吞吐率”和“低延迟”. 这两个指标 ...
- 搭建分布式yarn
1.在前一篇准备好Hadoop的基础上配置,链接 http://www.cnblogs.com/cici20166/p/6266367.html 2./etc/profile 配置环境变量 expor ...
- (蓝桥杯)2018JAVA B组 日志分析
日志统计 小明维护着一个程序员论坛.现在他收集了一份"点赞"日志,日志共有N行.其中每一行的格式是: ts id 表示在ts时刻编号id的帖子收到一个"赞". ...
- Python 字典(2)
一.遍历字典 一个字典可能会包含多个键-值对,字典可以以多种方式存储信息,因此有多种遍历字典的方式,比如键-值对.键.值. 1.遍历所有的键-值对 user_01 = {'username':'tiz ...