flex

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

      body {

        margin: 0px;

        padding: 0px;

        height: 100vh;

        display: flex;

        flex-direction: column;

      }

      .top,

      .bottom {

        height: 100px;

        background-color: red;

      }

      .center {

        background-color: pink;

        flex: 1;

      }

    </style>

  </head>

  <body>

    <div class="top"></div>

    <div class="center"></div>

    <div class="bottom"></div>

  </body>

</html>

绝对定位

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

      html,

      body {

        margin: 0px;

        padding: 0px;

        height: 100vh;

        position: relative;

        overflow: hidden;

      }

      .top,

      .bottom {

        height: 100px;

        background-color: red;

      }

      .top {

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

      }

      .bottom {

        position: absolute;

        left: 0;

        bottom: 0;

        width: 100%;

      }

      .center {

        box-sizing: border-box;

        width: 100%;

        height: 100%;

        padding: 100px 0;

      }

      .content {

        height: 100%;

        background-color: blue;

        width: 100%;

      }

    </style>

  </head>

  <body>

    <div class="top"></div>

    <div class="center">

      <div class="content"></div>

    </div>

    <div class="bottom"></div>

  </body>

</html>

grid

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

      html,

      body {

        margin: 0px;

        padding: 0px;

        height: 100vh;

        overflow: hidden;

        display: grid;

        grid-template-rows: 100px auto 100px;

      }

      .top,

      .bottom {

        background-color: rgba(255, 0, 0, 0.5);

      }

      .center {

        background-color: blue;

      }

    </style>

  </head>

  <body>

    <div class="top"></div>

    <div class="center"></div>

    <div class="bottom"></div>

  </body>

</html>

html 布局，上下各100px,中间自适应的更多相关文章

  1. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  2. NEC学习 ---- 布局 -三列，右侧自适应

    效果如图 html代码: <div class="g-bd3 f-cb"> <div class="g-sd31"> <p> ...

  3. css布局：定宽，自适应

    css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...

  4. css网页布局 --- 左边固定，右边自适应

    div的布局统一如下: <body> <div class="wrap"> <div class="left"></d ...

  5. CSS布局——左定宽度右自适应宽度并且等高布局

    方法一: 别的不多说,直接上代码,或者参考在线DEMO,下面所有的DEMO都有HTML和CSS代码,感兴趣的同学自己慢慢看吧. HTML Markup <div id="contain ...

  6. 你不知道的css各类布局（三）之自适应布局

    自适应布局 概念 自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称 自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局 ...

  7. css布局中左侧固定右侧自适应

    float 单一层浮动法左侧固定成100px; 则核心代码 左侧:width:100px;float:left; 右侧 width:auto;margin-left:100px;绝大浏览器是没有任何问 ...

  8. NEC学习 ---- 布局 -三列，左侧自适应

    效果图: html代码: <div id="demo4"> <div class="g-bd4 f-cb"> <div class ...

  9. css布局之左侧固定右侧自适应布局

    参考代码如下: <form id="form1" style="height:100%; overflow:hidden;"> <div st ...

随机推荐

  1. Python学习【第2篇】：基本数据类型

    基本数据类型 字符串 ---------n1 = "xiaoxing"   n2 = "admin"  n3 = "123"  n4 = & ...

  2. 从零搭建一个IdentityServer——初识OpenIDConnect

    上一篇文章实现了IdentityServer4与Asp.net core Identity的集成,可以使用通过identity注册功能添加的用户,以Password的方式获取Access token, ...

  3. scala中List、Array、ListBuffer、ArrayList、Set

    scala中List.Array.ListBuffer.ArrayList.Set 一.List 二.Array 三.LIstBuffer 四.ArrayBuffer 五.Set 一.List Lis ...

  4. 单体架构、SOA架构、微服务架构

  5. 31-1.解决service iptables save出错

    CentOS 7.x开始,CentOS开始使用systemd服务来代替daemon,原来管理系统启动和管理系统服务的相关命令全部由systemctl命令来代替.service命令只保留下了极少部分使用 ...

  6. Dotnet的局部函数和委托的对比

    上一篇说了一下委托,这篇来说说局部函数和委托的对比.   把委托和局部函数放成前后篇,是因为这两个内容很像,用起来容易混. 需要了解委托相关内容,可以看这一篇 [传送门]   使用委托表达式(Lamb ...

  7. Codeforces Round #552 (Div. 3) E. Two Teams (模拟,优先队列,双向链表)

    题意:有\(n\)个队员站成一排,有两个教练分别选人,每次选当前剩余人中的能力值最大的那个以及他两边相邻的\(k\)个人,问最后每个人所在队伍情况. 题解:优先队列模拟,以及双向链表,先用结构体存入每 ...

  8. Codeforces Global Round 11 B. Chess Cheater (贪心,结构体排序)

    题意:你和朋友进行了\(n\)个回合的棋艺切磋,没有平局,每次要么输要么赢,每次赢可以得一分,假如前一局也赢了,那么可以得两分,结果已成定局,但是你确可以作弊,最多修改\(k\)个回合的结果,问你作弊 ...

  9. CodeForces - 1100E 二分+拓扑排序

    题意: 一个n个节点的有向图,节点标号从1到n,存在m条单向边.每条单向边有一个权值,代表翻转其方向所需的代价.求使图变成无环图,其中翻转的最大边权值最小的方案,以及该方案翻转的最大的边权. Inpu ...

  10. JavaScript——浏览器检查

    遍历opera中的所有方法