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. trunc(sysdate)的含义是什么

    1.ORACLE中TRUNC是截取的函数

  2. Linux 实时查看进程网络的使用情况

    一行代码实现 linux 指定进程网络的使用情况 pid=4203;count=0;while true;do info2=`sed -n '4,100p' /proc/$pid/net/dev |a ...

  3. 【面试必问】python实例方法、类方法@classmethod、静态方法@staticmethod和属性方法@property区别

    [面试必问]python实例方法.类方法@classmethod.静态方法@staticmethod和属性方法@property区别 1.#类方法@classmethod,只能访问类变量,不能访问实例 ...

  4. redis.clients.jedis.exceptions.JedisConnectionException: java.net.SocketTimeoutException: connect time out

    redis.clients.jedis.exceptions.JedisConnectionException: java.net.SocketTimeoutException: connect ti ...

  5. 解决brew下载php（不存在libphp7.so）

    我是一名PHP的初学者,在mac上安装php7参考作者 coolma <在mac中如何安装php7>: 1. 安装Homebrew(mac ox不可或缺套件管理器,方便快捷的安装插件等) ...

  6. 我和Python的Py交易》》》》》》 命名空间的小弟作用域

    命名空间的小弟作用域 在这要明确一个观点,在Python中万物皆对象,而变量指向的就是对象. 变量可以是 类名,函数名,储存数据的变量…… 对象可以是  类 ,被封装的一段代码(函数),数据…… 命名 ...

  7. LeetCode初级算法的Python实现--排序和搜索、设计问题、数学及其他

    LeetCode初级算法的Python实现--排序和搜索.设计问题.数学及其他 1.排序和搜索 class Solution(object): # 合并两个有序数组 def merge(self, n ...

  8. POJ-2155：Matrix（二维树状数祖）

    Matrix Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 31892   Accepted: 11594 Descript ...

  9. 【Hutool】Hutool工具类之String工具——StrUtil

    类似的是commons-lang中的StringUtils 空与非空的操作——经典的isBlank/isNotBlank.isEmpty/isNotEmpty isBlank()——是否为空白,空白的 ...

  10. day 3 list列表生成式

    1.定义一个list列表,里面元素是0-33 a = [] i = 0 while i<33: a.append(i) i+=1 print(a) [0, 1, 2, 3, 4, 5, 6, 7 ...