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. JetBrains(IEDA、CLion、Pycharm) 学生获得免费使用资格

    JetBrains针对学生推出了免费使用资格,但是很多同学却不知道或者说不知道怎样获得免费资格,只能千辛万苦的去寻找破解密钥,但现在JetBrains针对盗版的封锁越来越严密,很多密钥过一段时间就会失 ...

  2. Java8 ,LocalDate，LocalDateTime处理日期和时间工具类，

    Java8 ,LocalDate,LocalDateTime处理日期和时间工具类 1.获取今天的日期 2.在Java 8 中获取年.月.日信息 3.在Java 8 中处理特定日期 4.在Java 8 ...

  3. Java性能优化，操作系统内核性能调优，JYM优化，Tomcat调优

    文章目录 Java性能优化 尽量在合适的场合使用单例 尽量避免随意使用静态变量 尽量避免过多过常地创建Java对象 尽量使用final修饰符 尽量使用局部变量 尽量处理好包装类型和基本类型两者的使用场 ...

  4. CVE-2018-4407(IOS缓冲区溢出漏洞)exp

    CVE-2018-4407为ios缓冲区溢出漏洞 exp: import scapyfrom scapy.all import * send(IP(dst="同一局域网内目标Ip" ...

  5. typedef void (*sighandler_t)(int);

    typedef void (*sighandler_t)(int); sighandler_t signal(int signum, sighandler_t handler); ---------- ...

  6. 算法-迪杰斯特拉算法（dijkstra）-最短路径

    迪杰斯特拉算法(dijkstra)-最短路径 简介: 迪杰斯特拉算法是由荷兰计算机科学家狄克斯特拉于1959 年提出的,因此又叫狄克斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有向图中 ...

  7. 【有趣的全彩LED | 编程】用STM32 HAL库让WS2812B为你所动

    一.效果展示 观看演示效果:https://www.bilibili.com/video/BV1dv411Y7x3 使用STM32 HAL库编程 PWM+DMA控制输出,CubeMX生成初始工程 实现 ...

  8. docker（3）快速搭建centos7-python3.6环境

    前言 当我们在一台电脑上搭建了python3.6的环境,下次换台电脑,又得重新搭建一次,设置环境变量等操作. 好不容易安装好,一会提示pip不是内部或外部命令,一会又提示pip: command no ...

  9. spark提交命令 spark-submit 的参数 executor-memory、executor-cores、num-executors、spark.default.parallelism分析

    转载:https://blog.csdn.net/zimiao552147572/article/details/96482120 nohup spark-submit --master yarn - ...

  10. D - Seek the Name, Seek the Fame

    The little cat is so famous, that many couples tramp over hill and dale to Byteland, and asked the l ...