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. iOS视频倒放

    iOS视频倒放 视频的倒放就是视频从后往前播放,这个只适应于视频图像,对声音来说倒放只是噪音,没什么意义,所以倒放的时候声音都是去除的. 倒放实现 一般对H264编码的视频进行解码,都是从头至尾进行的 ...

  2. phpStudy环境安装SSL证书教程（apache）

    https://cloud.tencent.com/product/ssl 此链接是检测域名 证书的可以检测一下 下面是证书配置 小白呢亲测 作为PHP程序员,我们一定要学会使用phpStudy环境集 ...

  3. python3爬虫-网易云排行榜，网易云歌手及作品

    import requests, re, json, os, time from fake_useragent import UserAgent from lxml import etree from ...

  4. exsi6.0远程修改密码

    -------------------------------esxi远程修改root密码--------------------------- 在不接触物理机时,通过启动ssh服务,远程修改密码,具 ...

  5. 帝国cms全文搜索 增加自定义字段搜索

    帝国cms全站搜索功能只能调出固定的几个字段,如果想搜索其他字段的值,这时我们应该怎么办呢?开拓族网站有这个需求,所以研究了一下帝国的全站搜索,后来发现在/e/sch/index.php中可以直接对数 ...

  6. Vue 生产环境部署

    简要:继上次搭建vue环境后,开始着手vue的学习;为此向大家分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,希望能够跟各位VUE大神学习探索,如果有不对或者好的建议告知下:*~*! 一. ...

  7. 利用主成分分析（PCA）简化数据

    一．PCA基础 线性映射(或线性变换),简单的来说就是将高维空间数据投影到低维空间上,那么在数据分析上,我们是将数据的主成分(包含信息量大的维度)保留下来,忽略掉对数据描述不重要的成分.即将主成分维度 ...

  8. .Net 面试题 汇总（五）

    1.简述javascript中的“=.==.===”的区别? =赋值 ==比较是否一般相等 "3"==3 //会做类型的隐式转换,true ===比较是否严格相等 "3& ...

  9. 20145209 2016-2017-2 《Java程序设计》第3周学习总结

    20145209 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 1.构造方法决定类生成对象的方式 用this将已存在的参数的值指定给此参数. 用new建立新 ...

  10. Android开发——Context类的各种细节问题

    0. 前言   Context相信所有的Android开发人员基本上每天都在接触,因为它太常见了.但实际上Context有太多小的细节并不被大家所关注,那么今天我们就来学习一下那些你所不知道的细节. ...