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. csv的读写操作

    cvs简介: CSV 全称 Comma-Separated Values,中文叫逗号分隔值或字符分隔值,它以纯文本形式存储表格数据(数字和文本),其本质就是一个字符序列,可以由任意数目的记录组成,记录 ...

  2. python 拼接字

    在编译脚本的时候,由于脚本的框架是统一写好的,于是乎用上了拼接字的功能, 本脚本实现的是波特率设置的自动化,利用的是正则表达式,TASK函数是统一写好的,此处只做调用 from Args import ...

  3. JavaScript——DOM操作

    DOM-(Document Object Model)即文档对象模型. JavaScript可以动态地修改DOM,从而来修改HTML的内容. 查找HTML元素 通过 id 找到 HTML 元素 通过标 ...

  4. Dbeaver 连接 phoenix

    Dbeaver 连接 phoenix 1.新建连接 2.选择连接类型Phoenix 3.设置驱动 4.准备驱动包 5.添加驱动 6.添加 Zookeeper Base Path 7.找到驱动类 8.配 ...

  5. Java8种排序算法学习

    冒泡排序 public class test { public static void main(String[] args) { // TODO Auto-generated method stub ...

  6. PL/SQL 学习分享

    PL SQL概述 什么是PLSQL PLSQL的特点 PLSQL的开发环境 PLSQL的工作原理 语句块重点部分 PLSQL声明命名规则 声明 命名规则 表达式和运算符 表达式的分类 运算符分类 流程 ...

  7. （31）grep命令详解：查找文件内容

    1.grep命令用于不需要列出文件的全部内容,而是从文件中找到包含指定信息的那些行. grep命令能够在一个或多个文件中,搜索某一特定的字符模式(也就是正则表达式),此模式可以是单一的字符.字符串.单 ...

  8. k8s 调度 GPU

    最近公司有项目想在 k8s 集群中运行 GPU 任务,于是研究了一下.下面是部署的步骤. 1. 首先得有一个可以运行的 k8s 集群. 集群部署参考 kubeadm安装k8s 2. 准备 GPU 节点 ...

  9. 动态规划TG.lv(1) （洛谷提高历练地）

    动态规划TG.lv(1) P1005 矩阵取数游戏 分析:每行不超过80个数字,直接区间DP即可,\(dp[i][j]\)表示区间\([i,j]\)之间取数可以得到的答案,每次向右或者向左扩展即可.但 ...

  10. HDU6370 Werewolf 【基环内向树】

    HDU6370 Werewolf 题意: 有\(N\)个人玩狼人杀,只有村民和狼人,每个人指定另一个人并指出一个身份,其中:村民是不会说谎的,狼人是有可能说谎的,问在所有情况下必然是狼人的人数和必然是 ...