1、圣杯布局（Holy Grail Layout）

其指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

2、输入框布局

3、悬挂布局

4、固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

vh单位:vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。

代码及详解参考：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

【CSS-flex】圣杯布局（Holy Grail Layout）、输入框的布局、悬挂式布局、固定的底栏的更多相关文章

  1. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  2. 轻轻松松学CSS:Flex布局

     Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...

  3. Android 布局学习之——Layout(布局)具体解释二（常见布局和布局參数）

     [Android布局学习系列]   1.Android 布局学习之--Layout(布局)具体解释一   2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数)   ...

  4. Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）

    [Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.And ...

  5. CSS响应式布局到底是什么？

    响应式布局是最近几年在前端开发中非常火热的词,它是相对于固定像素大小的网页而言的,那么CSS响应式布局到底是什么?顾名思义,响应式布局就是网页能够响应各种各样不同分辨率大小的设备,能够将网页很好的呈献 ...

  6. Android 自定义View修炼-Android中常见的热门标签的流式布局的实现

    一.概述:在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出哈) 类似的 ...

  7. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  8. web前端学习（二）html学习笔记部分（9）-- 响应式布局

    1.2.23  响应式布局基础 1.2.23.1  响应式布局介绍 1.响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多终端 -- 而不是为每个终端做一个特定的版本.这个概 ...

  9. 【Win10开发】响应式布局——AdaptiveTrigger

    接触过Windows10的童鞋已经知道Universal app不仅可以运行在pc上,还可以运行在mobile或者其他平台上.那么这样势必会带来一个问题,如何针对不同屏幕来进行布局适配.所以微软提供了 ...

随机推荐

  1. nvm安装最新稳定版node

    安装当前最新的稳定版. nvm install stable

  2. 用户登录注册（安全）(常规、FB、google、paypal) 实战

    /* 用户登录界面 */elseif ($action == 'login'){    if($_SESSION['user_id'])    {        ecs_header("Lo ...

  3. Spring动态注册bean实现动态多数据源

    Spring动态注册bean实现动态多数据源 http://blog.csdn.net/littlechang/article/details/8071882

  4. 解决docker启动错误 error creating overlay mount to /var/lib/docker/overlay2

    原文 最近在centos7.1使用docker运行redis镜像,出现下面的错误: /usr/bin/docker-current: Error response from daemon: error ...

  5. centos 安装cloud foundry CLI

    步骤: 1.wget -O /etc/yum.repos.d/cloudfoundry-cli.repo https://packages.cloudfoundry.org/fedora/cloudf ...

  6. OpenStack IceHouse 部署 - 1 - 架构说明

    参考架构 Architecture from OpenStack Install Guide Reference Architecture Network Isolation 在本次部署中,我们采用了 ...

  7. BZOJ1970 [Ahoi2005] 矿藏编码

    Description 依次对每份进行编码,得S1,S2,S3,S4.该矿藏区的编码S为2S1S2S3S4. 例如上图中,矿藏区的编码为:2021010210001. 小联希望你能根据给定的编码统计出 ...

  8. hdu5824 graph

    传送门 题意:定义一个无向图的权值为图中形为树的连通块数量的$k$次方,求所有$n$个点有标号的简单无向图的权值之和. 这个题还是很妙的啊……(好吧,其实只有最后的复合函数求导比较有意思……) 先套路 ...

  9. mysql 的增删改查

    数据库的基本流程就是先看你的数据库中的库都是哪些:show databases; 然后再进入相应的库进行操作  :  use+进入的库/表 切换路径 查看这个库内的所有的表: show tabales ...

  10. [翻译] JTBorderDotAnimation

    JTBorderDotAnimation https://github.com/jonathantribouharet/JTBorderDotAnimation JTBorderDotAnimatio ...