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. codevs 1344 模拟退火

    1344 线型网络  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamo   题目描述 Description 有 N ( <=20 ) 台 PC 放在机房内 ...

  2. 采用pandas读取文件，进行自动化统计小程序

    自己完成的第二个自动化统计小程序,完成之后感觉:命名不够规范,造成可读性比较没那么好,幸好给自己很多地方都加了注释#coding:utf-8import os,sysimport reimport x ...

  3. Prometheus 初探和配置（安装测试）

    本文大纲: • Prometheus 官⽹下载• Prometheus 开始安装• Prometheus 启动运⾏• Prometheus 基本配置⽂件讲解• 安装第⼀个exporter => ...

  4. Java 8教程(知识内容详细，快速学习Java 8)

    允许在接口中有默认方法实现 Lambda表达式 函数式接口 方法和构造函数引用 Lambda的范围 内置函数式接口 Predicates Functions Suppliers Consumers C ...

  5. 力扣1423. 可获得的最大点数-C语言

    题目 题目链接 几张卡牌 排成一行,每张卡牌都有一个对应的点数.点数由整数数组 cardPoints 给出. 每次行动,你可以从行的开头或者末尾拿一张卡牌,最终你必须正好拿 k 张卡牌. 你的点数就是 ...

  6. zjnu1730 PIRAMIDA(字符串，模拟)

    Description Sample Input 6 JANJETINA 5 1 J 1 A 6 N 6 I 5 E Sample Output 1 0 2 1 1 题意:给你一个长度小于等于10^6 ...

  7. 国产网络损伤仪SandStorm -- 如何连接设备

    国产网络损伤仪SandStorm可以模拟出带宽限制.时延.时延抖动.丢包.乱序.重复报文.误码.拥塞等网络状况,在实验室条件下准确可靠地测试出网络应用在真实网络环境中的性能,以帮助应用程序在上线部署前 ...

  8. Vue3.0新特性

    Vue3.0新特性 Vue3.0的设计目标可以概括为体积更小.速度更快.加强TypeScript支持.加强API设计一致性.提高自身可维护性.开放更多底层功能. 描述 从Vue2到Vue3在一些比较重 ...

  9. python Crypto 加密解密

    本片文字记录使用python 的Crypto 工具对图片或者文本进行加密解密的方法: import numpy as np from PIL import Image from base64 impo ...

  10. Numpy Quickstart tutorial

    此文是关于Numpy的一些基本用法, 内容来源于Numpy官网:https://docs.scipy.org/doc/numpy-dev/user/quickstart.html 1.The Basi ...