下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度
<div id="body">
    <div id="navbar"></div>
    <div id="content"></div>
</div>
 
css如下:
html,
body {
    padding: 0px;
    margin: 0px;
    height: 100%;
}
 
div
{
    padding:0px; 
    margin:0px;
}
 
#navbar {
    background-color: brown;
    width: 100%;
    height: 30px;
}
 
#content {
    background-color: gray;
    width: 100%;
}
 
方法一:通过js代码来动态设置高度来实现
  • 在JS尾部直接调用下列函数
  • 在body元素的resize事件增加对下列函数的调用
本例中执行setHundredPercentHeight("content","body","navbar");
 
    // 第一个参数为指定的对象
    // 第二个参数为容器对象
    // 第三个及其后的所有对象均为部署在指定对象的上方或下方的对象,即在同一个容器中需要扣除高度的对象
    function setHundredPercentHeight(objId,containerId)
    {
        var length = arguments.length;
        var height = 0;
        for (var i = 2; i < length; i++)
        {
            height += $("#" + arguments[i]).outerHeight();
        }
 
        $("#" + objId).height($("#" + containerId).height() - height);
    }
 
方法二:通过CSS来直接实现
#content {
    background-color: gray;
    width: 100%;
    position: absolute;
    top: 30px;
    bottom: 0px;
}
采用绝对定位,top用来设置显示的起始位置,通过bottom来设置最底位置。
由于绝对定位是以整个浏览器为坐标轴的,故该方法不适合下方还有其他元素的情况。
相对来说,第一种方法更加通用一些。
#nav {

    background-color: #85d989;
    width: 100%;
    height: 50px;
}
#content {
    background-color: #cc85d9;
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0px;
}

如何将div高度填满剩余高度的更多相关文章

  1. css实现div的高度填满剩余空间

    css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...

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

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

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

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

  4. 两个DIV,左DIV宽度固定,右DIV自动填满剩余空间

    <style type="text/css"> #main{ width:98%; } #sidebar{ float:left; width:200px; backg ...

  5. 微信小程序 scroll-view 填满剩余可用高度

    根据微信小程序 scroll-view 文档所述,scroll-view必须给定一个固定高度.那么如果我们想要让它自动填充剩余高度,该怎么办呢? 前言 在说出我的解决方案之前,先来看一下我的页面设计, ...

  6. H5 布局 -- 让容器充满屏幕高度或自适应剩余高度

    在前端页面布局中,经常会碰到要让容器充满整个屏幕高度或者剩余屏幕高度的需求.一般这时候都会想当然的使用 height:100% 这样的 CSS 来写. 这样写的话,当容器内内容很多的时候是没有问题的, ...

  7. div 自适应高度 自动填充剩余高度

    方案1: Html: <div class="outer"> <div class="A"> 头部DIV </div> &l ...

  8. css布局------左边宽度不定,右边宽度自动填满剩余空间

    HTML <div class="container"> <div class="left"></div> <div ...

  9. div填满页面剩余空间的方法

    想让div填满页面剩余空间,最简易的方式还是靠提前的布局. 这里提供两种方法: (1)利用 height 样式的%比例设置布局 <!DOCTYPE html> <html lang= ...

随机推荐

  1. 002_Python多线程相当于单核多线程的论证

    很多人都说python多线程是假的多线程!下面进行论证解释: 一. 我们先明确一个概念,全局解释器锁(GIL) Python代码的执行由Python虚拟机(解释器)来控制.Python在设计之初就考虑 ...

  2. vue 使用 supermap iclient-classic

    1. 2.在组件中: import "@supermap/iclient-classic/libs/SuperMap-8.1.1-16520"; import { MapVLaye ...

  3. 零基础如何自学java开发?

    开篇直奔主题,java 学习个人感觉分为两种途径,第一种是在学校,在培训机构等地方学习. 有人指导:第二种是自学,通过视频,书籍,朋友等完成学习. 本文适合 自学,且基础薄弱或者无基础的人.先介绍下我 ...

  4. 2. CMake 系列 - 编译多文件项目

    目录 1. 编译不使用第三方库的项目 1.1 项目目录结构 1.2 相关代码 1.3 编译 2. 编译使用第三方库的项目 2.1 项目目录结构 2.2 相关代码 2.3 编译 1. 编译不使用第三方库 ...

  5. python安装第三方库报错visual c++ 14.0 is required

    使用python安装第三方库时报错如下: error: Microsoft Visual C++ 14.0 is required. Get it with “Microsoft Visual C++ ...

  6. CollapsingToolbarLayoutDemo【可折叠式标题栏,顺便带有CardView卡片式布局】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 CollapsingToolBarLayout是一个作用于ToolBar基础之上的布局,它也是由Design Support库提供的 ...

  7. Spring Boot连接MySQL数据库

    上篇 只需两步!Eclipse+Maven快速构建第一个Spring Boot项目 已经构建了一个Spring Boot项目,本文在此基础上进行连接MySQL数据库的操作. 1. pom.xml添加依 ...

  8. 数据分析之matplotlib.pyplot模块

    首先都得导模块. import numpy as np import pandas as pd import matplotlib.pyplot as plt from pandas import S ...

  9. 基于Socket通讯(C#)和WebSocket协议(net)编写的两种聊天功能(文末附源码下载地址)

    今天我们来盘一盘Socket通讯和WebSocket协议在即时通讯的小应用——聊天. 理论大家估计都知道得差不多了,小编也通过查阅各种资料对理论知识进行了充电,发现好多demo似懂非懂,拷贝回来又运行 ...

  10. python3-列表字典简单练习题

    .求全部元素的和[,,,,,,,] >>> a=[,,,,,,,] >>> result= >>> for i in a: ... result+ ...