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. Webpack4.0各个击破（5）module篇

    一. 模块化乱炖 脚本合并是基于模块化规范的,javascript模块化是一个非常混乱的话题,各种[*MD]规范乱飞还要外加一堆[*.js]的规范实现.现代化前端项目多基于框架进行开发,较为流行的框架 ...

  2. 寻找最小字符串，IP地址——解题报告

    寻找最小字符串 题目 思路 在寻找最小字符串的时候需要用到的函数有strcmp和strcpy,首先先输入输入字符串,先假设第一个字符串为最小的字符串min,再然比较接下来的字符串,当接下来的字符串比m ...

  3. 大型面试现场：一条update sql执行都经历什么？

    导读 Hi,大家好!我是白日梦!本文是MySQL专题的第 24 篇. 今天我要跟你分享的MySQL话题是:"从一条update sql执行都经历什么开始,发散开一系列的问题,看看你能抗到第几 ...

  4. 三：Spring Security 登录添加验证码

    Spring Security 登录添加验证码 1.准备验证码 2.自定义过滤器 3.配置 1.准备验证码 要有验证码,首先得先准备好验证码,本文采用 Java 自画的验证码,代码如下: /** * ...

  5. kafka的演进历史

    首先如果我开始做一个消息队列,最开始的时候可能就是一台单机上的一个单一的log日志,不断地向这个日志中追加消息即可. 后来,可能由于一个log日志支撑不了太多的读写请求,于是就对这个log日志进行了拆 ...

  6. redis分布式锁的这些坑，我怀疑你是假的开发

    摘要:用锁遇到过哪些问题? 一.白话分布式 什么是分布式,用最简单的话来说,就是为了较低单个服务器的压力,将功能分布在不同的机器上面:就比如: 本来一个程序员可以完成一个项目:需求->设计-&g ...

  7. AYIT-2020 609暑假集训第一周周赛题 A - A计划

    可怜的公主在一次次被魔王掳走一次次被骑士们救回来之后,而今,不幸的她再一次面临生命的考验.魔王已经发出消息说将在T时刻吃掉公主,因为他听信谣言说吃公主的肉也能长生不老.年迈的国王正是心急如焚,告招天下 ...

  8. Codeforces Round #667 (Div. 3) B. Minimum Product (贪心,数学)

    题意:给你\(a\)和\(b\)两个数,每次操作可以是任意一个数\(-1\),最多操作\(n\),并且\(a\ge x\),\(b\ge y\),求操作后\(a*b\)的最小值. 题解:观察样例并且在 ...

  9. 洛谷P1522 [USACO2.4]牛的旅行 Cow Tours

    洛谷P1522 [USACO2.4]牛的旅行 Cow Tours 题意: 给出一些牧区的坐标,以及一个用邻接矩阵表示的牧区之间图.如果两个牧区之间有路存在那么这条路的长度就是两个牧区之间的欧几里得距离 ...

  10. 关于malloc/free用法

    和很多人一样,我一直觉得new/delete和malloc/free的用法很随意,直到我真正遇到了麻烦,才想着去好好区分一下. (1)首先mallo函数原型void* malloc(size_t).头 ...