<!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. JavaScript（九）：JavaScript中的内置对象

    一.对象的概念 对象是一种特殊的数据类型(object). 拥有一系列的属性和方法. 分为内置对象和自定义对象. 二.String对象 String对象用来支持对于字符串的处理. 1.属性 lengt ...

  2. IntelliJ: Maven projects need to be imported: Import Changes Enable Auto-Import

    upon creating a new maven project I get the popup box saying "Maven projects need to be importe ...

  3. webpack6--css 背景图片处理

    当css里面含有背景图片,用webpack打包时会报如下错: 如何处理这个问题呢? 我们需要借助于 file-loader 和  url-loader 这2个包. 下面具体说一下步骤: 1.安装 fi ...

  4. 微信小程序——实现动画循环播放

    今天在做砍价页面的时候需要将一个按钮动起来,效果图如下: 其实它实现的原理很简单,就是循环的缩小放大. css3中的animate 有个属性是 animation-iteration-count 可以 ...

  5. 12 extremely useful hacks for JavaScript

    In this post I will share 12 extremely useful hacks for JavaScript. These hacks reduce the code and ...

  6. CSS非ASCII字符最佳实践

    问题场景 在写样式时经常需要用到非ASCII字符的属性值,如下: ? 1 2 3 4 5 6 7 8 9 10 11 .hot_list .sign_discount:before {    cont ...

  7. -26628 loadrunner

    在Vuser脚本编译执行无误情况下,在controller中进行并发操作,并发数设为10,只通过5个,失败的报错信息是:   Action.c(15): Error -26628: HTTP Stat ...

  8. 关于Unity中拖尾渲染器的使用

    拖尾渲染器 是一个组件,能够帮我们绘制出拖尾的效果. 就是跟在运动物体后面的东西,前进的过程中,末尾的不断消失,前面的不断生成,有一个长度.长度是以时间计算的,从末尾到头有多少秒的时间就是拖尾的长度. ...

  9. Network In Network——卷积神经网络的革新

    Network In Network 是13年的一篇paper 引用:Lin M, Chen Q, Yan S. Network in network[J]. arXiv preprint arXiv ...

  10. elasticsearch系列二：索引详解（快速入门、索引管理、映射详解、索引别名）

    一.快速入门 1. 查看集群的健康状况 http://localhost:9200/_cat http://localhost:9200/_cat/health?v 说明:v是用来要求在结果中返回表头 ...