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实现第九届蓝桥杯等腰三角形

    等腰三角形 题目描述 本题目要求你在控制台输出一个由数字组成的等腰三角形. 具体的步骤是: 1. 先用1,2,3,...的自然数拼一个足够长的串 2. 用这个串填充三角形的三条边.从上方顶点开始,逆时 ...

  2. Linux 日志管理简介

    查看日志rsyslogd是否启动和自启动 ps aux | grep rsyslogd 查看自启动(CentOS 7使用,CentOS 6可以使用chkconfig命令) systemctl list ...

  3. keras搭建神经网络快速入门笔记

    之前学习了tensorflow2.0的小伙伴可能会遇到一些问题,就是在读论文中的代码和一些实战项目往往使用keras+tensorflow1.0搭建, 所以本次和大家一起分享keras如何搭建神经网络 ...

  4. C语言－耶稣门徒

    <span style="font-family: Arial, Helvetica, sans-serif;"> </span> <span sty ...

  5. Windows10 搭建 ElasticSearch 集群服务

    一.前言 集群的搭建需要多台机器,之前我使用 ubuntu 16.04 搭建过 hadoop 的单机模式和分布式模式,这个今后会写,今天先写一篇使用 < Windows10 搭建 Elastic ...

  6. spring-framework 源码的下载与构建

    整体流程: 本地环境准备 找到源码地址并拉取到本地 根据IDE工具查看源码中提供的不同的安装说明并具体操作 构建会出现的的错误及解决 一.本地环境准备 spring-framework 源码使用gra ...

  7. 【Transferable NAS with RL】2018-CVPR-Learning Transferable Architectures for Scalable Image Recognition

    Transferable NAS with RL 2018-CVPR-Learning Transferable Architectures for Scalable Image Recognitio ...

  8. Clear Writer v1.8 更新

    拖更了这么久之后,Clear Writer 诈尸啦(bushi 下载链接:https://linhongping.lanzous.com/ikF2Udmf7if Clear Writer v1.8 更 ...

  9. [每日一题2020.06.09] leetcode #97 交错字符串 dp

    题目链接 利用动态规划的思想, 对于每种状态(i, j)来说都有(i-1, j) 和 (i,j-1) 需要注意的问题 : 初始化的问题,先把i=0和j=0的状态都初始化后才可以进行dp否则发生数组越界 ...

  10. 浅淡i.MX8M Mini处理器的效能以及平台对比

    i.MX 8M Mini是恩智浦首款嵌入式多核应用处理器,定位在任何通用工业和物联网的应用,是一款针对边缘计算应用的芯片,也是恩智普i.MX系列中第一个加了机器学习核的产品线.这颗芯片采用先进的14L ...