Simple layout
|
body { padding: 0; margin: 0; overflow: hidden; }
div { display: block; position: relative; }
.content-header { height: 100px; background-color: blue; }
.content-body { background-color: yellow; height: calc(100vh - 200px); overflow-x: hidden; overflow-y: auto; }
.content-footer { height: 100px; background-color: green; } |
<!DOCTYPE HTML> <html lang="en-EN"> <head> <title>Layout Sample</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="no" /> <link href="./layout.css" rel="stylesheet"> </head> <body> <div class="content-header"> Header </div> <div class="content-body"> Body <ul> <li></li> </ul> </div> <div class="content-footer"> Footer </div> </body> </html> |
Simple layout的更多相关文章
- Memory Layout for Multiple and Virtual Inheritance
Memory Layout for Multiple and Virtual Inheritance(By Edsko de Vries, January 2006)Warning. This art ...
- ExtJS中layout的12种布局风格
总览 extjs的容器组件都可以设置它的显示风格,它的有效值有 1. absolute,2. accordion, 3. anchor, 4. border, 5. card, 6. column, ...
- XSL-FO Page Layout
Simple Layout Let's take a look at the simple page layout that we saw earlier in the course. The sim ...
- What's new in Windows 10 Enterprise with Microsoft Edge.(Windows 10 新功能)
What's new in Windows 10 Enterprise with Microsoft Edge --带有Edge浏览器的Windows 10 企业版的新功能 本文摘录自公司群发邮件, ...
- Snippet: align a TextView around an image
A few weeks ago I discovered the Spans on Android,after reading the wonderful post by Flavien Lauren ...
- (转)The 9 Deep Learning Papers You Need To Know About (Understanding CNNs Part 3)
Adit Deshpande CS Undergrad at UCLA ('19) Blog About The 9 Deep Learning Papers You Need To Know Abo ...
- emulator shortcut
Alt+Enter Maximizes the emulator. Ctrl+F11 Changes the orientation of the emulator from landscape to ...
- Gradle 1.12用户指南翻译——第五十章. 依赖管理
本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见:http://blog.csdn.net/column/details/gradle-translation.html翻译项目请关注Github上 ...
- ABP框架系列之八:(Introduction-介绍)
Introduction We are creating different applications based on different needs. But implementing commo ...
随机推荐
- Oracle作业5——多表查询、子查询
一.基础练习: 1.查询和scott相同部门的员工姓名ename和雇用日期hiredate SELECT ENAME,HIREDATE FROM EMP WHERE DEPTNO=(SELECT DE ...
- BZOJ1023: [SHOI2008]cactus仙人掌图(仙人掌dp)
Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 3467 Solved: 1438[Submit][Status][Discuss] Descripti ...
- 深入理解bit_or和bit_and,bit_count
bit_or:二进制数按位或,bit_and:二进制数按位与,bit_count:统计二进制数1个个数 下面以一个例子来说明用法:示例要实现的功能就是计算每月有几天有访问,先把示例摘录在这里.1234 ...
- Ubuntu下Zabbix结合percona监控mysql数据
按道理来说zabbix就自带的MySQL插件来监控mysql数据库,但是你会发现,自带的mysql监控项是很少的,根本满足不了公司的需求.由于它本身自带的模板太过简单了,所以需要做更详细的监控,而pe ...
- js 中~~是什么意思?
其实是一种利用符号进行的类型转换,转换成数字类型 ~~true == 1~~false == 0~~"" == 0~~[] == 0 ~~undefined ==0~~!undef ...
- flask第三方插件DBUtils
django中有强大的ORM支持我们来操作数据库, 但是flask没有提供对数据库的操作, 依然还是需要第三方的支持, 来提高我们的开发效率. 下载DBUtils 使用DBUtils 使用DBUtil ...
- centos7下使用n grok编译服务端和客户端穿透内网
(发现博客园会屏蔽一些标题中的关键词,比如ngrok.内网穿透,原因不知,所以改了标题才能正常访问,) 有时候想在自己电脑.路由器或者树莓派上搭建一些web.vpn等服务让自己用,但是自己的电脑一般没 ...
- JS本地保存数据的几种方法
1.Cookie 这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了.COOKIE优点很多,使用起来很方便 但它的缺点也很多: 比如跨域访问问题:无法保存太大的数据(最大仅为4KB):本地保存 ...
- CSS基础part1
CSS 概述CSS 指层叠样式表 (Cascading Style Sheets),样式定义了如何显示 HTML文件中的标签元素,CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标 ...
- Prism for WPF 搭建一个简单的模块化开发框架 (一个节点)
原文:Prism for WPF 搭建一个简单的模块化开发框架 (一个节点) 这里我就只贴图不贴代码了,看看这个节点之前的效果 觉得做的好的地方可以范之前的文章看看 有好的建议也可以说说 填充数据 ...