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. 减少if...的使用

    最近维护一批代码,其中包括一堆if...的使用,多的情况嵌套8.9层,痛苦不堪,所以搜寻一些可以降低if...else的方法来改善一下代码,写个简单总结. 第一种: 优化前 if (measuredV ...

  2. 使用PyQtGraph绘制数据滚动图形（3）

    import pyqtgraph as pg import numpy as np from pyqtgraph.Qt import QtGui, QtCore app = pg.QtGui.QApp ...

  3. win10系统无法删除文件的解决方法

    方法/步骤 1:首先进入不能删除的文件所在的文件夹 2:右键单击此文件夹,选择授予访问权限 3:在授权界面选择删除权限 4:在删除权限中点击更改共享权限 5:我们选择administrator级别,点 ...

  4. EIGRP-9-弥散更新算法-拓扑表

    弥散更新算法(DUAL)是一个收敛算法.它代替了其他距离矢量协议使用的Bellman-Ford 算法.路由环路.甚至是在协议完全收敛前出现的瞬时环路.都会对网络性能造成不良影响.为了防止环路的形成.D ...

  5. # 详细了解HTML5中的form表单

    4.规范使用 <form>元素用于组织所有表单部件(也称为控件或字段),负责告诉浏览器把数据提交到哪里,方法是在action属性中提供一个URL.加入你只是想在客户端使用JavaScrip ...

  6. python下载及安装步骤

    Python安装 1.浏览器打开网址:www.python.org 2.根据电脑系统选择下载 3.确定电脑系统属性,此处我们以win10的64位操作系统为例 4.安装python 3.6.3 双击下载 ...

  7. HTMLTestRunner生成html测试报告

    使用:把文件放到项目某个文件夹中,引入方式如下 import unittest import env import vendor.report.HTMLTestRunnerNew as HTMLTes ...

  8. qemu-guest-agent详解

    qemu guest agent简称qga, 是运行在虚拟机内部的一个守护程序(qemu-guest-agent.service),他可以管理应用程序,执行宿主机发出的命令. QEMU为宿主机和虚拟机 ...

  9. laravel向视图传递变量

    向视图中传递变量 我们在开发web应用当中,通常都不是为了写静态页面而生的,我们需要跟数据打交道,那么这个时候,问题就来了,在一个MVC的框架中,怎么将数据传给视图呢?比如我们要在 ArticleCo ...

  10. cb01a_c++_数据结构_顺序容器_STL_deque类

    /*cb01a_c++_数据结构_顺序容器_STL_deque类deque是一个动态数组,比vector更加灵活.两者都属于动态数组deque与vector非常类似deque可以在数组开头和末尾插入和 ...