<!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. js 空数组是true还是false

    var arr = new Array(); // 或 var arr = []; 我们知道,初始化后,即使数组arr中没有元素,也是一个object. typeof arr; // "ob ...

  2. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  3. compareTo返回值为-1 、 1 、 0 的排序问题

    1.什么是Comparable接口 此接口强行对实现它的每个类的对象进行整体排序.此排序被称为该类的自然排序 ,类的 compareTo 方法被称为它的自然比较方法 .实现此接口的对象列表(和数组)可 ...

  4. js 获取单选框和复选框的值和js dom方法给单选框和多选框赋值

    获取单选框框值的方法 function getRadioRes(Name){ var rdsObj = document.getElementsByName(Name); var checkVal = ...

  5. 【转】【Python】Python网络编程

    Socket简介 在网络上的两个程序通过一个双向的通信连接实现数据的交换,这个链接的一端称为一个Socket(套接字),用于描述IP地址和端口. 建立网络通信连接至少要一对端口号(Socket),So ...

  6. Google File System 学习

    摘要 Google的人设计并实现了Google File System,一个可升级的分布式文件系统,用于大的分布式数据应用.可以运行在廉价的日用硬件上,具备容错性,且为大量客户端提供了高聚合的性能. ...

  7. 第三百四十九节，Python分布式爬虫打造搜索引擎Scrapy精讲—cookie禁用、自动限速、自定义spider的settings，对抗反爬机制

    第三百四十九节,Python分布式爬虫打造搜索引擎Scrapy精讲—cookie禁用.自动限速.自定义spider的settings,对抗反爬机制 cookie禁用 就是在Scrapy的配置文件set ...

  8. Java如何以短格式显示月份？

    在Java中,如何显示短格式的月份名称? 使用DateFormatSymbols().DateFormatSymbols类的getShortMonths()方法,本示例显示了几个月的简写名称. pac ...

  9. （原创）OpenStack服务如何使用Keystone (二)---部署和配置Keystone中间件

    (一)Keystone端的操作 (二)如何在OpenStack服务上部署Keystone中间件 (三)详细配置keystonemiddleware 部署OpenStack时一般先安装Keystone服 ...

  10. 【转】Gulp入门基础教程

    Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...