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. 第三天-零基础学习python

    1.回忆.列表方法,append(),extend(),insert() 2.列表获取元素: >>> member = ['HU','YU','HUYAN','HUJIAMU']   ...

  2. Excel2013打开提示 文件格式和扩展名不匹配。文件可能已损坏或不安全。除非您信任其来源，否则请勿打开。是否仍要打开它?

    有的时候打开xls文档时,会提示“文件格式和扩展名不匹配.文件可能已损坏或不安全.除非您信任其来源,否则请勿打开.是否仍要打开它?” 遇到这种情况,我们需要 1.win键+R键,打开“运行“,输入re ...

  3. Java中Date类型如何向前向后滚动时间,( 附工具类)

    Java中的Date类型向前向后滚动时间(附工具类) 废话不多说,先看工具类: import java.text.SimpleDateFormat; import java.util.Calendar ...

  4. java synchronized 关键字原理

    Synchronized 关键字是解决并发问题常用解决方案,有以下三种使用方式: 同步普通方法,锁的是当前对象.同步静态方法,锁的是当前 Class 对象.同步块,锁的是 {} 中的对象. 实现原理: ...

  5. 报错： Name node is in safe mode

    将本地文件拷贝到hdfs上去,结果上错误:Name node is in safe mode 这是因为在分布式文件系统启动的时候,开始的时候会有安全模式,当分布式文件系统处于安全模式的情况下,文件系统 ...

  6. Linux及FL2440使用过程遇到的各种问题和小技巧

    原文链接:http://www.cnblogs.com/NickQ/p/8900474.html ## Linux及FL2440使用过程遇到的各种问题和小技巧 关于移植linux根文件系统中的问题 在 ...

  7. CentOS6升级Python2.6到3.7，错误处理[No module named '_ctypes']

    CentOS6升级Python2.6到3.7,错误处理[No module named '_ctypes'] 因开发需要,在CentOS 6 服务器将Python2进行升级到Python3.由于工作中 ...

  8. 一、Django初级

    创建项目,也就是网站 1.cmd,输入:pip3 install Django==2.1.2 2.>>>import django 3.cmd进入需要建项目的文件夹,django-a ...

  9. tomcat搭建https服务(非自签发）

    平时做自己的web demo基本上都是用http协议进行访问. 但是正式情况基本上都是https进行访问,所以掌握https的配置是很关键的. 需要准备的材料: 一台可以可以外网访问的远程服务器 to ...

  10. python note 001

    .tilte() .upper() .lower() --- \n \t --- "apple"+" "+"pen" --- .strip( ...