<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<style type="text/css">

			*{margin: 0;padding:0}

			html,body{

				width:100%;

				height:100%;

			}

			#container{

				height: 100%;

				display: -webkit-box;

				-webkit-box-orient: vertical;

			}

			header{

				width: 100%;

				height: 100px;

				background: darkcyan;

				-webkit-box-flex-group: 3;

			}

			footer{

				width: 100%;

				height: 100px;

				background: darkcyan;

				-webkit-box-flex: 1;

				-webkit-box-flex-group: 1;

			}

			section{

				width: 100%;

				height: 100px;

				background: #FFFFFF;

				-webkit-box-flex: 2;

				-webkit-box-flex-group: 1;

			}

		</style>

	</head>

	<body>

		<div id="container">

			<header></header>

			<section></section>

			<footer></footer>

		</div>

	</body>

</html>

旧的flex的更多相关文章

  1. CSS旧版flex及兼容

    × 目录 [1]适用范围 [2]伸缩项目 [3]伸缩流方向[4]伸缩流换行[5]主轴对齐[6]伸缩性[7]显示顺序[8]flex兼容 前面的话 flex弹性盒模型有3个版本: 旧版本.混合版本和新版本 ...

  2. 让旧版本的 Flash IDE 支持更新的 Flash Player/AIR 功能

    转载:https://blog.zengrong.net/post/1568.html 让旧版本的 Flash IDE 支持更新的 Flash Player/AIR 功能 今天在论坛上看到一篇文章:H ...

  3. css3 新旧伸缩盒的异同

    由于不需要理会IE浏览器,伸缩盒(flexible box)移动端开发中非常好用! 工作中使用APICLOUD开发手机App,老板要求兼容到安卓2.3(新版的需要安卓4.4以上),所以一直使用的是旧版 ...

  4. flex盒子布局

    看过很多对于弹性盒子flex的简介,但还是觉得阮一峰大神的解析和张鑫旭大神(旧版flex)的解析比较容易理解,下面,我以自己的理解来叙述关于flex弹性布局! 1.概念(容器和项目) 在flex中,有 ...

  5. 走进flex布局

    简介:flex 是一个CSS的display 属性中新添加一个值. 随着inline-flex的使用,它将使它适用的元素成为一个flex container(伸缩容器),而这个元素的每个子元素将成为 ...

  6. CSS学习目录

    前面的话 CSS是前端工程师的基本功,但好多执迷于学习javascript的人的基本功并不扎实.可能一些人从w3school网站匆匆过了一遍,只是对CSS常用概念有一些表面上的理解,就一头扎进java ...

  7. 文本溢出text-overflow和文本阴影text-shadow

    前面的话 CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别.因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性. ...

  8. Flex-box 学习

    .flex-cont{ /*定义为flexbox的“父元素”*/ display: -webkit-box; display: -webkit-flex; display: flex; /*子元素沿主 ...

  9. swf version 与flash player 对应关系

    2013-04-16更新:更新Flash Player 11.7/AIR 3.7正式版. 详细链接FlashPlayer 11.7详情 2013-03-10更新:更新Flash Player 11.6 ...

随机推荐

  1. 使用SQL Server发送邮件时遇到的诡异事件

    最近公司要实现一个邮件群发的功能,因此设计时就考虑用SQL Server的邮件发送功能直接推送邮件算了. 可是在实现的过程中,邮件内容中有一个表格的内容要展现,于是就编排了一个表格来实现. 具体实现如 ...

  2. thinkphp日志分析

    #!/usr/bin/perl -w use strict; use warnings; use Tie::File; #### # Thinkphp日志分析 # 日志基本格式:{$now} &quo ...

  3. AndroidStudio 编译异常java.lang.OutOfMemoryError: GC overhead limit exceeded

    在build.gradle中的android{}添加如下脚本就可以顺利编译了 dexOptions { incremental true javaMaxHeapSize “4g” }

  4. Cmder 设置默认打开目录、解决中文乱码

    win + alt + p //打开设置 选择Startup-Task,修改{cmd::Cmder}项,把: *cmd /k "%ConEmuDir%\..\init.bat" - ...

  5. struts系列：返回json格式的响应

    一.增加依赖库 // https://mvnrepository.com/artifact/org.apache.struts/struts2-json-plugin compile group: ' ...

  6. windbg分析执行在64位环境下的32位程序的dump

    windbg命令例如以下 1.   .load wow64exts 2.   !sw 3.   ~* kvnf

  7. pthread编译时报错的解决方法

    最近在学习POSIX thread编程,今天编译一个程序报如下错误: /tmp/ccXH8mJy.o:在函数‘main’中:deadlock.c:(.text+0xbb):对‘pthread_crea ...

  8. [转] spring的普通类中如何取session和request对像

    在使用spring时,经常需要在普通类中获取session,request等对像.比如一些AOP拦截器类,在有使用struts2时,因为struts2有一个接口使用org.apache.struts2 ...

  9. [转]同步对象Event的用法

    同步对象Event的用法  首先介绍CreateEvent是创建windows事件的意思,作用主要用在判断线程退出,线程锁定方面.  CreateEvent函数功能描述:创建或打开一个命名的或无名的事 ...

  10. Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的: 实践一下Knockout提供的CSS绑定功能和JQuery的blur失去焦点事件, 这次不使用Knockout的afterkeydown事件了． 步骤: 先在htm中添加.error的css样 ...