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实现第三届蓝桥杯地址格式转换

    地址格式转换 [编程题](满分21分) Excel是最常用的办公软件.每个单元格都有唯一的地址表示.比如:第12行第4列表示为:"D12",第5行第255列表示为"IU5 ...

  2. XStrea学习手册

    ​​ 一.前言 1.XStream官网 http://x-stream.github.io 2.XStream是什么 XStream是一个简单的基于Java的类库,用来将Java对象序列化成XML(J ...

  3. 痞子衡嵌入式：降低刷新率是定位LCD花屏显示问题的第一大法(i.MXRT1170, 1280x480 LVDS)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是i.MXRT1170上LCD花屏显示问题的分析解决经验. 痞子衡最近这段时间在参与一个基于i.MXRT1170的大项目(先保个密),需要 ...

  4. Android Studio自定义签名文件

    在项目多人开发的时候,如果使用到第三方框架,需要keystore的sha1值的时候,则需要共享debug签名才能进行程序调试 可以在gradle文件中配置如下选项,并且把keystore文件放到项目m ...

  5. pdf文件处理--QPDF

    1.分割pdf文件 从原文件中取出n-m页,保留原文件的目录格式: qpdf infile.pdf --pages . n-m -- outfile.pdf 从原文件中取出n-m页,不保留原文件的目录 ...

  6. 【PHP】如何将SESSION数据存放到Redis中

    在php中,SESSION的数据默认是存放到文件中,这样性能不仅不高,而且不利于扩展.在搭建集群后,默认存放到文件中就不适用了.所以,我们一般将SESSION自定义,让SESSION中的数据存放到 数 ...

  7. 并行处理框架Celery的Web监控管理服务-Flower

    安装和使用 使用pip安装Flower: $ pip install flower或 pip install flower -U -i https://pypi.tuna.tsinghua.edu.c ...

  8. 《刻意练习之C#》-0016- C#预处理器指令

    预处理指令 这些指令/命令不会转换为可执行代码,但会影响编译过程的各个方面:列如,可以让编译器不编译某一部分代码等. C#中主要的预处理指令 #define和#undef #define指令定义: # ...

  9. statsmodels中方差分析表结果解析

    引言 通常我们在对多个变量进行统计分析的时候,结果的汇总和整理需要耗费大量的时间和精力,稍有不慎还有可能出现错误.因此在对多个变量统计分析的时候,使用自动化的脚本对结果进行整理和汇总就十分的方便了. ...

  10. HBase中加盐（Salting）之后的表如何读取：协处理器文章

    我们介绍了避免数据斑点的三种比较常见方法: 加盐-盐腌 哈希-散列 反转-反转 其中在加盐(Salting)的方法里面是这么描述的:给Rowkey分配一个随机指针以使其和之前排序不同.但是在Rowke ...