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的更多相关文章

  1. Memory Layout for Multiple and Virtual Inheritance

    Memory Layout for Multiple and Virtual Inheritance(By Edsko de Vries, January 2006)Warning. This art ...

  2. ExtJS中layout的12种布局风格

    总览 extjs的容器组件都可以设置它的显示风格,它的有效值有 1. absolute,2. accordion, 3. anchor, 4. border, 5. card, 6. column, ...

  3. 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 ...

  4. 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 企业版的新功能 本文摘录自公司群发邮件, ...

  5. 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 ...

  6. （转）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 ...

  7. emulator shortcut

    Alt+Enter Maximizes the emulator. Ctrl+F11 Changes the orientation of the emulator from landscape to ...

  8. Gradle 1.12用户指南翻译——第五十章. 依赖管理

    本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见:http://blog.csdn.net/column/details/gradle-translation.html翻译项目请关注Github上 ...

  9. ABP框架系列之八：(Introduction-介绍)

    Introduction We are creating different applications based on different needs. But implementing commo ...

随机推荐

  1. DB数据源之SpringBoot+MyBatis踏坑过程（六）mysql中查看连接，配置连接数量

    DB数据源之SpringBoot+MyBatis踏坑过程(六)mysql中查看连接,配置连接数量 liuyuhang原创,未经允许禁止转载 系列目录连接 DB数据源之SpringBoot+Mybati ...

  2. Mybartis逆向工程

    Mybartis逆向工程 0.创建工程项目,切记莫用中文,亲测在运行时报错 1.Pom文件,使用mybatis-generator插件 <?xml version="1.0" ...

  3. JFinal DB.tx()事务回滚及lambda表达式应用

    JFinal DB.tx()事务回滚 在要往数据库操作多条数据时,就需要用到事务,JFinal中有封装好的事务应用 写法: Db.tx(new IAtom(){ @Override public bo ...

  4. react-router-dom和本地服务本地开发 (node、webpack)

    场景 使用react 做开发,避免会使用react-router React Router 已经是V4的版本 React Router 目前已经被划分成了三个包:react-router,react- ...

  5. Java中枚举的相关应用

    package example6; import org.junit.Test;/*1.什么是枚举? * 需要在颐堤港范围内取值,这个值只能是这个范围内的一个 * 使用枚举关键字enum * 枚举里也 ...

  6. Tornado 线程池应用

    Tornado是一个异步框架,在异步操作的时候能提升程序的处理性能.但是如果在程序中碰到同步的逻辑,由于GIL的关系,会直接卡死,导致性能急剧下降. 目前对于mongodb以及redis都有比较不错的 ...

  7. Python入门 —— 05时间日期处理小结

    此文多涉及基础,如果想要深入理解则到文末,有提供链接 涉及对象 1. datetime 2. timestamp 3. time tuple 4. string 5. date - datetime基 ...

  8. Linux中Elasticsearch集群部署

    1.下载安装包elasticsearch-6.3.1  安装包自己下载,网上很多 2.安装位置在cd /usr/local/elasticsearch/目录下 3.因为ES使用root权限运行会报错, ...

  9. 大数据学习--day04(选择结构、循环结构、大数据java基础面试题)

    选择结构.循环结构.大数据java基础面试题 switch: 注意: byte short int char String(jdk1.7支持) 不能是 long float double boolea ...

  10. VMWare共享文件

    windows与虚拟机的linux共享windows下的一个文件夹 1.重新安装VMware Tools,在VMware面板上选择“虚拟机-重新安装VMware tools…” 2.使用命令 Ctrl ...