Sticky Footer

经典的上-中-下布局。

当页面内容高度小于可视区域高度时，footer 吸附在底部；当页面内容高度大于可视区域高度时，footer 被撑开排在 content 下方

demo link

<body>

  <header>HEADER</header>

  <article>CONTENT</article>

  <footer>FOOTER</footer>

</body>

body {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}

article {

  flex: auto;

}

Fixed-Width Sidebar

在上-中-下布局的基础上，加了左侧定宽 sidebar。

demo link

<body>

  <header>HEADER</header>

  <div class="content">

    <aside>ASIDE</aside>

    <article>CONTENT</article>

  </div>

  <footer>FOOTER</footer>

</body>

body {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}

.content {

  flex: auto;

  display: flex;

}

.content article {

  flex: auto;

}

Sidebar

左边是定宽 sidebar，右边是上-中-下布局。

demo link

<body>

  <aside>ASIDE</aside>

  <div class="content">

    <header>HEADER</header>

    <article>CONTENT</article>

    <footer>FOOTER</footer>

  </div>

</body>

body {

  min-height: 100vh;

  display: flex;

}

aside {

  flex: none;

}

.content {

  flex: auto;

  display: flex;

  flex-direction: column;

}

.content article {

  flex: auto;

}

Sticky Header

还是上-中-下布局，区别是 header 固定在顶部，不会随着页面滚动。

demo link

<body>

  <header>HEADER</header>

  <article>CONTENT</article>

  <footer>FOOTER</footer>

</body>

body {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  padding-top: 60px;

}

header {

  height: 60px;

  position: fixed;

  top: ;

  left: ;

  right: ;

  padding: ;

}

article {

  flex: auto;

  height: 1000px;

}

Sticky Sidebar

左侧 sidebar 固定在左侧且与视窗同高，当内容超出视窗高度时，在 sidebar 内部出现滚动条。左右两侧滚动条互相独立。

demo link

<body>

  <aside>

    ASIDE

    <p>item</p>

    <p>item</p>

    <!-- many items -->

    <p>item</p>

  </aside>

  <div class="content">

    <header>HEADER</header>

    <article>CONTENT</article>

    <footer>FOOTER</footer>

  </div>

</body>

办公资源网址导航 https://www.wode007.com

 
 body {

   height: 100vh;

   display: flex;

 }

 aside {

   flex: none;

   width: 200px;

   overflow-y: auto;

   display: block;

 }

 .content {

   flex: auto;

   display: flex;

   flex-direction: column;

   overflow-y: auto;

 }

 .content article {

   flex: auto;

 }

使用flex实现5种常用布局的更多相关文章

  1. Day3 UI:7种常用控件、4种基本布局

    Android常用控件 TextView <TextView android:id="@+id/text_view" android:layout_width="m ...

  2. 几种常见布局的flex写法

    flex布局目前基本上兼容主流的浏览器,且实现方式简单.我整理了flex的一些知识点,并且总结归纳了几种常见布局的flex写法 ​flex基础知识点 flex-grow和flex-shrink相关计算 ...

  3. css 常用布局

    「前端那些事儿」③ CSS 布局方案 我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1.水平居中 a ...

  4. ExtJs常用布局--layout详解（含实例）

    序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...

  5. Flutter常用布局组件

    Flutter控件本身通常由许多小型.单用途的控件组成,结合起来产生强大的效果,例如,Container是一种常用的控件,由负责布局.绘画.定位和大小调整的几个控件组成,具体来说,Container是 ...

  6. display:flex;多行多列布局学习

    从以前的table布局到现在的div布局,再到未来的flex布局,CSS重构方面对展示行和适应性的要求越来越高: 首先来比较一下布局方式的更新意义: table布局: 优点:1.兼容性好,ie6.ie ...

  7. display的几种常用取值

    display的取值有很多种,下面列出比较常用的几种取值,还有其它的少用的值没有列出来: 1.none 此元素不会被显示,并且不占据页面空间,这也是与visibility:hidden不同的地方,设置 ...

  8. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  9. display:flex 多栏多列布局

    转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...

随机推荐

  1. java实现指数问题

    3^n mod 19 求n次幂,对19取模 ================ (3 * 3) * (3 * 3) * 3 public class A { // 分治 public static in ...

  2. 从零搭建Window前端开发环境

    前言 作为一个小前端,是否因为搭建环境烦恼过,是否因为npm等国外镜像踩坑过,不要怕,接下来跟着我一步步搭建适合自己的开发环境吧!!! node 这个不用说了吧,我们经常和他打交道,无论是 gulp. ...

  3. python3 优惠券查询GUI程序

    from tkinter import ttkfrom tkinter import messageboximport pymssqlimport tkinterimport decimalimpor ...

  4. Linux命令总结大全，包含所有linux命令

    使用说明:此文档包含所有的Linux命令,只有你想不到的没有你看不到的,此文档共计10万余字,有8400多行,预计阅读时间差不多需要3个小时左右,所以要给大家说一说如何阅读此文档 为了方便大家阅读,我 ...

  5. 新Mac电脑pycharm爬虫环境安装与配置

    *需要安装的软件:Pycharm.Squel pro.mysql.redis等. 1.下载安装pycharm. 2.下载安装item2. 3.安装brew:'ruby -e "$(curl ...

  6. void out2() const{

    include "stdafx.h" include using namespace std; class aa{ int num; public: aa(){ int b =10 ...

  7. jmeter录制app测试脚本

    1.jmeter 下载地址 https://jmeter.apache.org 2.选择下载包 3.下载完成后解压即可使用(也可以配置环境变量,但我一般不配置,可以使用) 4.打开jmeter 创建线 ...

  8. 面向对象存储框架：Obase快速入门

    在项目中完成对象建模后,可以使用Obase来进行对象的管理(例如对象持久化),本篇教程将创建一个.NET Core控制台应用,来展示Obase的配置和对象的增删改查操作.本篇教程旨在指引简单入门. 本 ...

  9. [apue] 一个快速确定新系统上各类限制值的工具

    对于在不同 Unix 系统之间移植程序,最重要的事情就是确定新系统的一些编译时.运行时固定或不固定的限制值了.例如文件路径最大长度 PATH_MAX.进程最大可打开文件句柄数 OPEN_MAX.用户可 ...

  10. yii2.0AR两表联查

    首先,建两个关联表. 表一 -- Table structure for article -- ---------------------------- DROP TABLE IF EXISTS `a ...