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实现Kruskal算法

    1 问题描述 何为Kruskal算法? 该算法功能:求取加权连通图的最小生成树.假设加权连通图有n个顶点,那么其最小生成树有且仅有n - 1条边. 该算法核心思想:从给定加权连通图中,选择当前未被选择 ...

  2. Java实现第九届蓝桥杯螺旋折线

    螺旋折线 题目描述 如图p1.pgn所示的螺旋折线经过平面上所有整点恰好一次. 对于整点(X, Y),我们定义它到原点的距离dis(X, Y)是从原点到(X, Y)的螺旋折线段的长度. 例如dis(0 ...

  3. java第三阶段作业总结

    Java第三阶段总结 前言 到这里,Java课程学习进入了尾声,在这学习过程中,我学习到很多,也发现了自己的很多不足,这篇博客主要针对的是Java整门课程学习的总结. 课程收获 对整门课程的学习,我有 ...

  4. Java学习之第二天

    一.流程控制 1.顺序结构:自上而下,依次执行(从上到下,一直走下去) 2.选择结构:(1)if .if—else.嵌套if (2)switch(mod){ case 1:执行代码 case 2:执行 ...

  5. 定时器+echarts运行时间太长导致内存溢出页面崩溃

    最近做的项目需要在页面上展示echarts图表,且数据每隔10s刷新一次,然后发现时间长了以后chorme浏览器会显示页面崩溃.一开始以为是定时器的原因,试了网上的很多方法,比如把setInterva ...

  6. win系统DOS批处理命令：每日根据定时计划，弹出相应的提醒

    @echo off setlocal enabledelayedexpansion ::设置数据源 ::set DATASET=D:\soft\xinyu\xinyu.txt ::获取系统时间的星期值 ...

  7. apache 2.4 httpd 2.4.6 反向代理后端的服务为HTTPS https 基于centos7

    需求场景:通过访问apache的http地址,反向代理访问后端的https服务,而且路径带有只能特定模块才反向代理 配置如下 listen <VirtualHost *:> #管理员邮箱 ...

  8. @bzoj - 3711@ [PA2014]Druzyny

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 体育课上,n个小朋友排成一行(从1到n编号),老师想把他们分成若 ...

  9. Java——几点重要知识笔记（一）

    学了Java有一段时间了,自认为有一些基础知识比较重要,因此记下来共享,不喜勿喷. 一.标识符 (1)定义:在Java语言中,凡是对类,方法,变量,包,参数等命名时,所使用的字符序列 (2)包含的内容 ...

  10. RANK()的对比（SQL, Minitab, Excel）

    RANK()的对比(SQL, Minitab, Excel)也不是想来做什么对比的,只是顺便写此文,想学习一下Minitab的应用以便用它分析解决实际的问题. 回顾 May 23文章“开窗函数_ROW ...