<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

  <style>

html,body,ul{

  height:100%;

}

body{

  margin:0

}

ul{

  display:flex;

  flex-direction:column;

  padding:0;

  margin:0;

}

li{

  background:yellow;

  margin:0;

  list-style:none;

  height:20px;

}

li:first-child,

li:last-child{

  height:50px;

  background-color: green;

}

li:nth-child(2){

  flex:1;

  overflow: scroll;

}

  </style>

</head>

<body>

<ul>

  <li>1</li>

  <li>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  	<p>hello</p>

  </li>

  <li>3</li>

</ul>

</body>

</html>

flexbox常用布局上下固定，中间滚动的更多相关文章

  1. flexbox常用布局左右固定，中间自适应

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. Flutter常用布局组件

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

  3. python：页面布局 后台管理页面之常用布局

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. 跟我学android-android常用布局介绍

    在上一章我们曾经谈到,Android平台的界面 是使用XML的方式设计的,然后在上一章我们只做了一个简单的界面,在这章,我们将介绍如何使用常用的控件设计实用的界面. Android中的视图都是继承Vi ...

  5. 关于FlexBox的布局

    关于FlexBox的布局 基本要素 因为FlexBox是一整个模块并不是一个单独的属性,它涉及到很多东西包括它的所有设置属性.一些属性是需要被设置在容器(父级元素,称为『弹性容器』),而一些其他的属性 ...

  6. WPF中的常用布局

    一 写在开头1.1 写在开头评价一门技术的好坏得看具体的需求,没有哪门技术是面面俱到地好. 1.2 本文内容本文主要内容为WPF中的常用布局,大部分内容转载至https://blog.csdn.net ...

  7. Android开发工程师文集-Fragment，适配器，轮播图，ScrollView，Gallery 图片浏览器，Android常用布局样式

    Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式 Fragment FragmentManager frag ...

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

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

  9. Java-Swing常用布局管理器

    http://www.cnblogs.com/hthuang/p/3460234.html   5.Java-Swing常用布局管理器       应用布局管理器都属于相对布局,各组件位置可随界面大小 ...

随机推荐

  1. jQuery（六）：value值操作

    val()可以获取或设置元素的value属性值.语法如下: 示例: <!DOCTYPE html> <html lang="en"> <head> ...

  2. RGB转灰度图的几种算法

    https://blog.csdn.net/cool1949/article/details/6649429 方法一:    对于彩色转灰度,有一个很著名的心理学公式: Gray = R*0.299 ...

  3. substance新版及问题

    新版地址:https://github.com/Insubstantial,目前是7.3版 http://stackoverflow.com/questions/3657538/substance-u ...

  4. Java ArrayList源码剖析

    转自: Java ArrayList源码剖析 总体介绍 ArrayList实现了List接口,是顺序容器,即元素存放的数据与放进去的顺序相同,允许放入null元素,底层通过数组实现.除该类未实现同步外 ...

  5. Ubuntu下qemu环境搭建

    在查找资料过程中,发现自己搭建虚拟的arm环境的话,有一个比较好的软件就是qemu了,当然还有其他的,大家各投所好就好. 接下来说一下qemu环境搭建过程. 其实搭建很简单,作为小白,我还是捣鼓了两三 ...

  6. 《FPGA全程进阶---实战演练》第九章 计数器要注意

    本小节我们来做一个好玩的事情,就是计数器,还记得在做LED自加实验时我们就曾经提到过关于计数器的相关议题,那么这节我们就来讨论讨论. 探讨一下如下的问题:请用verilog记八个数的写法,分析这个可以 ...

  7. iOS项目的目录结构（Cocoa China）

    目录结构 AppDelegate Models Macro General Helpers Vendors Sections Resources   一个合理的目录结构首先应该是清晰的,让人一眼看上去 ...

  8. 推荐个office能在线预览的插件

    1.chrome  office viewer 这个可以离线使用 2.微软 office web app  可以使用微软在线服务器或则自己搭建服务器 有兴趣的朋友百度一下具体操作方法

  9. FusionCancer-人类癌症相关的融合基因的数据库

    RNA-seq 测序可以用于融合基因的发现,在过去的十几年里,RNA-seq 测序数据不断增加,发现的融合基因的数据也不断增加: FusionCancer 是一个人类癌症相关的融合基因的数据库,利用N ...

  10. perl 查看某个模块的安装路径

    perldoc 命令可以查看某个模块的安装路径 命令: perldoc -l Bio::Seq 返回值如下: /usr/local/share/perl5/Bio/Seq.pm