<!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. 一个worker thread服务一个客户端

    服务器端对一个客户端来了就开启一个工作线程,最多可接受64个. 具体看代码: #pragma once #include <winsock.h> #include <stdio.h& ...

  2. nginx端合并JS

    转载于:http://www.tuicool.com/articles/IjMNnq 配置文件: location /static/css/ { concat on; concat_max_files ...

  3. jquery 滑动取值

    JavaScript 滑动条效果 jquery 滚动条插件 仿iphone苹果横行滚动条美化样式商品图片展示

  4. iscsi target 之LIO配置

    LIO 配置 现在主流Linux都可以设置iSCSI,如STGT/TGT.LIO Target等.Linux-IO(LIO)Target是当前Linux标准的iSCSI target的开源实现,包含在 ...

  5. 【IL】IL指令详解

    名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...

  6. Windows 重装系统-用户转移User和Program Files 文件夹

    原文地址:https://blog.csdn.net/sinat_38799924/article/details/74059037 重装系统时为了让系统数据保持可用我们需要做一些备份处理.比如用户数 ...

  7. 【struts2】核心概念

    1)FilterDispatcher Struts2的前端控制器,也是Struts2的MVC中的控制器部分.在实际开发中,只需要在web.xml中配置一次即可,如下所示: <filter> ...

  8. Nginx https证书部署

    1 获取证书 Nginx文件夹内获得SSL证书文件 1_www.domain.com_bundle.crt 和私钥文件 2_www.domain.com.key,1_www.domain.com_bu ...

  9. dbms_monitor开启/关闭会话跟踪

    从10g开始,可以使用dbms_monitor开启/关闭会话跟踪. sql> desc dbms_monitor procedure client_id_stat_disable argumen ...

  10. Debian下的crontab保存

    nano编译器 ctrl+x然后y,保存退出