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开发中,多多少少的朋友在开发的过程中,测试数据的时候可能会碰到后台打印的时候不能正确的打印出正常的汉字,打印出一些影响判断的字符,经常需要查看数组中得元素是否是自己想要的,但是苹果并没有对直接 ...

  2. iOS视频处理

    在iOS中,apple提供了AVFoundation 用来处理音视频,基本能满足一些常用的音视频处理需求,而且能调用的硬件编解码接口,能提高不少效率,这是其它库所不能达到的.最近做过的Recnow S ...

  3. Spring知识点小结汇总

    Spring部分 1.谈谈你对spring IOC和DI的理解,它们有什么区别? IoC Inverse of Control 反转控制的概念,就是将原本在程序中手动创建UserService对象的控 ...

  4. Windows远程常见问题

    1.window2003远程桌面“已达最大连接数”解决:1)mstsc /v:(此处为服务器IP) /console   任务管理器注销已断开用户 mstsc /v:192.168.4.3 /cons ...

  5. 关于python的菜鸟教程

    1.正则表达式 http://www.runoob.com/regexp/regexp-metachar.html 2.python正则表达死 http://www.runoob.com/python ...

  6. Qt上FFTW組件的编译与安裝

    Qt上FFTW組件的編譯安裝 FFTW是一個做頻譜非常實用的組件,本文講述在Windows和Linux兩個平臺使用FFTW組件.Windows下的的FFTW組件已經編譯好成爲dll文件,按照開發應用的 ...

  7. fake_useragent 封装好user-agent的模块

    from fake_useragent import UserAgent useragent = UserAgent()print(useragent.random)

  8. 爬虫-windows下安装Scrapy及scrapy模块介绍

    一:安装wheel  wheel介绍 二:安装twisted twisted是由python编写的一款基于事件驱动的网络引擎,使用twisted模块将python的异步请求(异步模型介绍)成为可能且简 ...

  9. %.*lf控制输出长度

    #include<stdio.h> int main(){    int a,b,c;    while(scanf("%d%d%d",&a,&b,&a ...

  10. go内建容器-切片

    1.基础定义 看到'切片'二字,满脸懵逼.切的啥?用的什么刀法切?得到的切片有什么特点?可以对切片进行什么操作? 先看怎么得到切片,也就是前两个问题.切片的底层是数组,所以切片切的是数组:切的时候采用 ...