HTML

<body>
  <div class="container">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
  </div>
</body>

CSS

body,html {
　 height:100%;
}
/*方法1：绝对定位实现*/
.container {
  box-sizing: border-box;
  position: relative;
  min-height: 100%;
  padding: 100px 0;
  background-color: blue;
}
.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background-color: red;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: red;
}
/*方法2：弹性布局实现*/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.body {
  flex: 1 1 auto;
  background-color: blue;
}
.header, .footer {
  height: 100px;
  flex: 0 0 auto;
  background-color: red;
}

css布局------上下高度固定,中间高度自适应容器的更多相关文章

  1. css布局------左右宽度固定,中间宽度自适应容器

    HTML /*适用方法1,方法2*/<body> <div class="container"> <div class="left" ...

  2. css布局之头尾固定中间高度自适应

    被这个问题困扰了很久.大神别鄙视我,我是搞后台开发的....试过了很多方法,比如设定高度100%.同事用的js计算高度,我对js设置的方式一直觉得不够好,尽管设置高度为100%的方式更差,直到发现了一 ...

  3. CSS 实现：两栏布局（一边固定，一边自适应）

    ☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...

  4. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  5. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  6. css之页面三列布局之左右上下高度固定，中间自适应

    第一种,绝对定位 !DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <tit ...

  7. 布局：上下两个div高度固定，中间自适应

    需求:经典布局 —— 头尾固定高度中间高度自适应布局 头部固定高度,宽度100%自适应父容器: 底部固定高度,宽度100%自适应父容器: 中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中 ...

  8. css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

  9. 如何用CSS实现左侧宽度固定，右侧自适应（两栏布局）？左右固定中间自适应（三栏布局）呢？

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  10. 【CSS】318- CSS实现宽高等比自适应容器

    点击上方"前端自习课"关注,学习起来~ 在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半. 于是我们就需要实现一个宽度自 ...

随机推荐

  1. Python 多进程编程之fork()

    Python实现多进程可以用系统fork()方法和python的multiprocessing类 1,fork()方法是Unix/Linux操作系统提供的,在python的os模块中自带fork(). ...

  2. 【mysql】decimal数据类型

    1.float.double.decimal float:浮点型,4字节,32bit. double:双精度实型,8字节,64位 decimal:数字型,128bit,不存在精度损失,常用于银行帐目计 ...

  3. C语言基础课第五次作业

    PTA第五次作业 7-2 统计一行文本中的单词个数 一.程序代码 #include<stdio.h> int main(void) { ]; ,word=; char c; gets(st ...

  4. C# Winform 登录中的忘记密码及自动登录

    本地保存登录账号实现忘记密码及自动登录 #region 删除本地自动登录及记住密码信息 /// <summary> /// 删除本地自动登录及记住密码信息 /// </summary ...

  5. Django的学习进阶（一）—— 外键的使用

    一.描述 在利用django做网络开发的时候我们会遇到一个问题就是,我们建立了多张数据表,但是多张数据表中的内容是不一样的,但是之间有着联系比如: 我有两张表,一张是记录歌曲信息的内容,一张是对歌曲操 ...

  6. (PMP)第6章-----项目进度管理

    6.1 规划进度管理 输入 工具与技术 输出 1.项目章程 2.项目管理计划 (范围管理计划, 开发方法) 3.事业环境因素 4.组织过程资产 1.专家判断 2.数据分析 3.会议 1.进度管理计划 ...

  7. JavaScript ~~ECMAScript

    一.JavaScript 简介 HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) 2.JavaScript ...

  8. Android Studio中的大量findViewById

    一. 分析 在Android Studio中开发时,findViewById是用的最多的函数之一.经常需要对返回的view进行类型转换,输入麻烦.代码丑陋. 本文提供两种方案来解决这个问题: 1.安装 ...

  9. php 从2维数组组合为四维数组分析(项目中前台侧边栏导航三级分类显示)

    foreach函数(循环函数)内嵌套循环函数时,当内层完全循环完后,才会向上一级循环 数组要注意问题 array_merge----合并一个或多个数组 将一个或多个数组的单元合并起来,一个数组中的值附 ...

  10. 9：集合collection

    第一 集合框架的概述 集合类的由来:  对象用于封装特有数据,对象多了需要存储,如果对象的个数不确定,就使用集合容器进行存储.   集合和数组的区别: 数组虽然可以存储对象,但是长度是固定的:集合长度 ...