方案1:

Html:

    <div class="outer">
<div class="A"> 头部DIV </div>
<div class="B">下部DIV </div>
</div>

CSS:

html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
.A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }
.B { height: 100%; background: #D9C666; }

效果:

方案2:

HTML:

    <div class="outer">
<div class="A">头部DIV</div>
<div class="B">下部DIV</div>
</div>

CSS:

html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
.A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
.B { height: 100%; background: #D9C666; }

效果:

div 自适应高度 自动填充剩余高度的更多相关文章

  1. 让2个并列的div根据内容自动保持同等高度js

    有左右2个并列的div,2个div都不能限定高度.左div为导航,右div为内容.如何能让左div块自动获得和右div块相等的高度? 同时,也有网友提问到“如果右块高度比左块低,会不会导致左块的内容被 ...

  2. 如何将div高度填满剩余高度

    下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body">     <div id="navbar ...

  3. div height 自适应高度 占满剩余高度的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. CSS实现div填充剩余高度

    相信小伙伴们经常会遇到这个问题,我也是填了很多坑,查了很多资料,才解决的,下面我列出2个方法: 我们的需求如图: 1:(这个方法不推荐使用,因为可能会因为设备不同,而出现未知BUG,特别是div出现p ...

  5. 如何让2个并列的div根据内容自动保持同等高度

    最近在工作中碰到一个需求: 有左右2个并列的div,2个div都不能限定高度.左div为导航,右div为内容.如何能让左div块自动获得和右div块相等的高度? 同时,也有网友提问到"如果右 ...

  6. div高度自适应填充剩余部分

    在乐学一百的开发过程中,遇到了一个小乐Fm开发,需要跟百度fm差不多,上边一个条,下边一个条,中间部分填充.但是还不能固定高度,因为屏幕的宽高都不一样...height:100%是不可行的.搜了一圈, ...

  7. 【转】CSS实现div的高度填满剩余空间

    转自:http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html 高度自适应问题,我很抵触用js去解决,因为不好维护,也不够自然,但是纯用 ...

  8. div自适应高度

    div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...

  9. 怎么可以让div自适应屏幕的高度?(已解决)

    主要解决问题的方法是用JS脚本. 先看布局, 一个div是首部,另一个div是主体,主体包含左侧菜单和右侧内容. 我想把主体div的高度自适应屏幕剩余区域,怎么做? 首先,获取可见区域的高度,docu ...

随机推荐

  1. Spring 框架 详解 (四)------IOC装配Bean(注解方式)

    Spring的注解装配Bean Spring2.5 引入使用注解去定义Bean @Component  描述Spring框架中Bean Spring的框架中提供了与@Component注解等效的三个注 ...

  2. HDU 4996 Revenge of LIS(DP)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4996 题意:求1到n的全排列中,有多少个排列的最长上升子列长度为K? 思路:对于当前的最长上升子列,我 ...

  3. C#中获取程序集版本号的方法

    我的方法: string version = Assembly.GetExecutingAssembly().GetName().Version.ToString();   方法一: public v ...

  4. 【转载】理解C语言中的关键字extern

    原文:理解C语言中的关键字extern 最近写了一段C程序,编译时出现变量重复定义的错误,自己查看没发现错误.使用Google发现,自己对extern理解不透彻,我搜到了这篇文章,写得不错.我拙劣的翻 ...

  5. JAVA帮助文档全系列 JDK1.5 JDK1.6 JDK1.7 官方中英完整版下载

    JAVA帮助文档全系列 JDK1.5 JDK1.6 JDK1.7 官方中英完整版下载JDK(Java Development Kit,Java开发包,Java开发工具)是一个写Java的applet和 ...

  6. 多命令顺序执行、管道符 ; && || |

    多命令顺序执行:

  7. Linux 下常用解压命令(转载)

    Linux下常用文件解压(包括rpm.deb包) Linux下怎么解后缀名是gzip的文件?1.以.a为扩展名的文件:#tar xv file.a2.以.z为扩展名的文件:#uncompress fi ...

  8. CI实践_Android持续集成

    之前已经实现了Android的持续集成,并在项目中应用了一段时间.恰逢现在有几分钟时间,把之前的一些零散的点滴记录和整理一下,供有需要的朋友参考,或后续复用. 需要的准备知识:gitlab.Jenki ...

  9. netbeans环境的建立

    这是一个简单的实验,熟悉NetBeans的IDE环境的开发 首先下载一个NetBeans,可以在官网上下https://netbeans.org/downloads/index.html 要装NetB ...

  10. Can of Worms 【迭代/线段树】

    题意:一条直线上有n个炸弹,给出每个炸弹的爆炸半径,可以引爆另一个炸弹爆炸.问:每个炸弹爆炸后,最多有几个炸弹一起爆炸? 迭代,用线段树更新. #include <cstdio> #inc ...