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. 转：system.Security.Cryptography C# 加密和解密

    以下文转自: http://www.360doc.com/content/13/0122/05/19147_261678471.shtml 总结:注册的时候经过MD5加密存进数据库,在登录的时候需要先 ...

  2. iOS之NSDictionary初始化的坑

    最近在做项目的时候遇到一个挺坑的崩溃问题,是由于NSDictionary初始化时nil指针引起的崩溃.假设我们现在要初始化一个{key1 : value1, key2 : value2, key3 : ...

  3. LeetCode 简单 -二进制求和(105)

    给定两个二进制字符串,返回他们的和(用二进制表示). 输入为非空字符串且只包含数字 1 和 0. 示例 1: 输入: a = "11", b = "1" 输出: ...

  4. 『ACM C++』 PTA 天梯赛练习集L1 | 046-47

    今日刷题 ------------------------------------------------L1-046----------------------------------------- ...

  5. MySQL的空值和NULL区别

    从本质上区别: 1.空值不占空间 2.null值占空间   通俗的讲: 空值就像是一个真空转态杯子,什么都没有,而null值就是一个装满空气的杯子,虽然看起来都是一样的,但是有着本质的区别.     ...

  6. Linux下安装 nginx

    安装依赖 yum install gcc yum install pcre-devel yum install zlib zlib-devel yum install openssl openssl- ...

  7. 关于Django中JsonResponse返回中文字典编码错误的解决方案

    解决方案:JsonResponse(data, json_dumps_params={'ensure_ascii':False}) ! data是需要渲染的字典 def master(request) ...

  8. Enable directory listing on Nginx Web Server

    1:Test environment [root@linux-node1 ~]# cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core ...

  9. Hive(5)-DDL数据定义

    一. 创建数据库 CREATE DATABASE [IF NOT EXISTS] database_name [COMMENT database_comment] [LOCATION hdfs_pat ...

  10. C语言实现左旋字符串

    #include<stdio.h> #include<stdlib.h> #include<string.h> void left_rotate(char *str ...