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

下列代码中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;

}

转载于:https://www.cnblogs.com/changgf/p/10382310.html

如何将div高度填满剩余高度相关推荐

一个div分上下两部分，上部分高度不固定，下面部分自动填满剩余高度
div自动填满剩余高度 html <div class="wrapper" style="height:800px;"><div class= ...
css如何让页面填满剩余高度与宽度
首先了解CSS3支持vw(视口宽度)和vh(视口高度)作为单位例如:1vh表示视口高度的1% 所以在CSS3中,我们可以使用calc()函数来进行动态计算: 例如: <div><d ...
css div填满剩余高度
<div class="father"><div class="child1"></div><div class=&q ...
CSS实现div填满剩余高度
需求: nav和content盒子的高度和浏览器高度相同,且不能出现纵向滚动条绿色盒子高度固定,比如:50px 紫色盒子填充剩余的高度 BODY部分的代码: 方式一:绝对定位方式二:box-siz ...
css 填满剩余高度
DIV自动填满剩余空间
参考:http://bbs.blueidea.com/thread-2773197-1-1.html 效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DT ...
背景平铺两栏自适应（占满剩余高度）fastclick、IScroll双飞翼布局
文章目录背景平铺两栏自适应(占满剩余高度) 需求实现 fastclick插件的使用 IScroll插件的使用(实现区域滚动效果) 条件双飞翼布局(两边固定宽度,中间自适应) 条件实现背景平 ...
flex 子元素占满剩余高度与 flex:1 的子元素 overflow:hidden 失效
这几天使用flex开发大屏,遇到一个印象比较深的问题就是flex的子元素,在其他兄弟元素的高度不定的情况下,如何占满父元素的剩余空间? 效果图: 要点就是: 1.父元素要设置 display: fle ...
微信小程序页面除去头部和底部，中间高度铺满剩余部分的解决方案
做这么一个界面,让中间紫色和橙色部分的内容铺满在中间位置,并且让橙色部分位置固定不动,紫色部分内容超出时滚动,如图: 首先如何做到呢? 我使用了定位position:fiexed;让它撑满(关键代码) ...

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

如何将div高度填满剩余高度相关推荐

最新文章

热门文章