<!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. 基于html5 canvas 的客户端异步上传图片的插件，支持客户端压缩图片尺寸

    /** * Created by xx on 15-05-28. * 基于html5 canvas 的客户端异步上传画片的插件 * 在实际应用中,常常要用于上传图片的功能．在现在越来越多的手机weba ...

  2. QIODevice （Qt中所有 I/O devices 的基类，QFile，QBuffer，QTcpSocket等）

    QIODevice是所有Qt I/O设备的基类,它提供了对支持块读写设备(例如QFile,QBuffer,QTcpSocket)的通用实现和抽象接口.QIODevice是一种抽象,不能被实例化,但是, ...

  3. 小米3移动版 分区 调整/合并教程(16GB/64GB)

    (必读)版权声明:米3移动版TWRP Recovery为XueferH适配,分区脚本以及双数据置换脚本的知识产权,智力成果权归XueferH所有. 注:此教程仅适用于Xiaomi MI 3-移动版(1 ...

  4. 关于Unity中场景的导入与导出(专题九)

    Unity场景 场景虽然是由场景美术做好的,但是我们经常需要自己去导导出以及从别的项目导入,所以我们需要对场景的导入和导出有一个详细的了解 1: 场景是由美术人员搭建完成后提交给程序;2: 场景一般包 ...

  5. (笔记)Mysql命令alter add：增加表的字段

    alter add命令用来增加表的字段. alter add命令格式:alter table 表名 add字段 类型 其他; 例如,在表MyClass中添加了一个字段passtest,类型为int(4 ...

  6. C#实现windows服务安装，服务名可配置时出问题（无法创建 ProjectInstaller 安装程序类型的实例）

    [参考资料]Windows 安装服务 的两种方式 一.问题出在System.Configuration.ConfigurationManager.AppSettings[""].T ...

  7. 干货分享 9款精挑细选的HTML5应用

    对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单 图标动画 ...

  8. 设置时间同步（Linux,Solaris）

    经过网上各种搜索,将LINUX平台及solaris平台的时间同步整理如下: 主机情况:应用:2台LINUX服务器 redhat 5.5 内网数据库:2台Solaris服务器 Solaris 10 内网 ...

  9. EventBus的思路和一些反思

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws   C#本地实现的和Redis Set实现的,实际上都是要维护一个Events和Handle ...

  10. Window.Open()方法详细的参数说明及技巧。

    Window.Open()方法详细的参数说明及技巧. 一.window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法 ...