<!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. IDEA隐藏.idea文件夹

    打开setting,Editor-->File Types.在Ignore files and folders中添加“.idea;”

  2. 安卓程序代写 网上程序代写[原]BluetoothServerSocket详解

    一. BluetoorhServerSocket简介 1. 继承关系 public final class BluetoothServerSocket extends Object implement ...

  3. Recommended Practices for WPF Custom Control Developers

    I have always found that there isn’t enough documentation about Custom Control development in WPF. M ...

  4. python 查看目录下所有目录和文件

    python查看目录下所有的子目录和子文件 python递归遍历目录结构 我喜欢第一种 方法1 import json, os def list_dir(path, res): for i in os ...

  5. Android 8 Wifi 初始化过程

    记录一下wifi初始化过程. packages/apps/Settings/src/com/android/settings/wifi/WifiSettings.java public void on ...

  6. ubuntu 系统启动异常之无登录界面和版本号启动四个点的地方卡住

    zlib 搞的鬼,还没结局,由于rtmpdump 安装需要安装独立zlib库,装完后重启,完了吓一跳,卡住,尼玛这一年的代码都在里面啊!!! ldd /usr/sbin/python 查询库依赖zli ...

  7. 开源轻量级分布式文件系统--FastDFS

    FastDFS一个高效的分布式文件系统 分布式文件系统FastDFS原理介绍 分布式文件系统FastDFS设计原理 FastDFS安装.配置.部署(一)-安装和部署 分布式文件系统 - FastDFS ...

  8. JS 动态修改json字符串

    <script type="text/javascript"> //1.将表单序列化成json字符串 $.fn.serializeObject = function() ...

  9. MVC2 ,MVC3 ,MVC4,MVC5的区别,EF的各个版本的区别;LocalDB是个啥

    2010年發行ASP.NET MVC 2.0版,2011年發行ASP.NET MVC 3.0版,2012年發行ASP.NET MVC 4.0版 MVC3 需要.net framework 4.0 版本 ...

  10. Erlang Trace机制

    从FTP模块学习先进的诊断技术(Erlang Trace机制) http://blog.yufeng.info/archives/466