一、div设置百分百高度实现描述

在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的。这个是因为body高度默认值为自适应的,所以及时设置body第一个布局div高度为百分比也是无效的,因为div解析上级高度为0,自然div height 100%实际高度也为0。

浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。

因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。换句话说,父元素的高度只是一个缺省值:height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。

如果想让一个元素的百分比css高度height: 100%;起作用,你需要给这个元素的所有父元素的高度设定一个有效值。

二、未实现div height 100%示例

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未成功设置100%高度</title>
</head>
<body>
<div style="height: 100%;background-color: #4d85d1">
所在div设置高度100%
</div>
</body>
</html>

div有两个父元素html和body,如果想让div的百分比高度起作用的话就要为html和body设置高度

三、实现div高度100%的示例

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>成功设置100%高度</title>
<style type="text/css">
html,body{
height: 100%;
}
</style>
</head>
<body>
<div style="height: 100%;background-color: #4d85d1">
所在div设置高度100%
</div>
</body>
</html>

以上虽然实现了div的高度为100%,但是右侧出现了滚动条,这是因为body有一定的margin,也就是body默认有margin-top和margin-bottom所以设置100%高度之后body多余的margin值显示不完整,出现下拉滚动条,要想正确显示的话就要对body设置margin为0.

四、这是高度100%生效,去掉滚动条

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>成功设置100%高度去除滚动条</title>
<style type="text/css">
html,body{
height: 100%;
}
body{
margin: 0;
}
</style>
</head>
<body>
<div style="height: 100%;background-color: #4d85d1">
所在div设置高度100%
</div>
</body>
</html>

五、总结

要实现最外层div高度为100%(百分之百),关键对html和body要设置高度100%,如果只设置html和body标签其中一个高100%,也是无法实现body内第一个盒子高度100%的。但犹豫body默认有一定margin值,但设置body高度height 100%后,浏览器就会出现滚动条,所以可以对body设置margin为零,去除间距实现div height 100%也无滚动条效果。

【CSS系列】height:100%设置div的高度的更多相关文章

  1. 如何让div中的span垂直居中 ----height:100%设置div的高度

    如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...

  2. js不需要知道图片宽高的懒加载方法(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  3. css之height: 100%的有效场景

    在css的日常应用中,经常会遇到想要通过 height: 100%来达到使子盒子与父盒子高度一样的目的,但是偶尔明明设置了height: 100%,但是却没有达到想要的结果,这次我们就一起探索一下,什 ...

  4. 设置div自适应高度滚动

    <body> <div id="divc" style="overflow: auto;"> </div> <a id ...

  5. 如何设置div自适应高度

    1.给div添加overflow属性 .div{ width:760px; overflow:hidden; } 2.其他的设置height:auto 等我测试没有效果

  6. 设置DIV最小高度以及高度自适应随着内容的变化而变化

    <!--退租账单--> <div id="bilsli" onmouseover="showBill(this)"> #bilsli{ ...

  7. table和div设置height:100%无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...

  8. 深入理解CSS系列(二):为什么height:100%不生效?

    对于height属性,如果父元素height为auto,只要子元素在文档流中(即position不等于fixed或者absolute),其百分比值完全就被忽略了.这是什么意思呢?首先来看个例子,比如, ...

  9. 设置div 高度 总结

    如果将div 的height 设置为固定的像素值,在不同分辨率的显示屏上,会看到div 在浏览器上的高度不一致.可以以百分比的形式设置div 的高度.注意,这个百分比是针对div 的上一层标签而言的, ...

随机推荐

  1. Python入门学习:网络刷博器爬虫

    1.比较有趣,可以不断刷新指定的网址 2.源码: #!/usr/bin/env python3 # -*- coding: utf-8 -*- import webbrowser as web imp ...

  2. Lynx

    http://www.unlinux.com/doc/soft/20051105/7402.html http://www.today-wx.com/linux/274.html 把 HTML 转成文 ...

  3. datatable删除一行方法

    t.row($(e).parents('tr')[0]).remove().draw(false); t为定义的datatable对象,row里面传入当前行的DOM元素.

  4. Python之XML解析详解

    什么是XML? XML 指可扩展标记语言(eXtensible Markup Language). XML 被设计用来传输和存储数据. XML是一套定义语义标记的规则,这些标记将文档分成许多部件并对这 ...

  5. js提取新浪邮箱的信用卡

    js提取用户新浪邮箱中的信用卡信息,是js非nodejs. 对比py,之前就做不好,出现了复杂点选验证码.js的开发速度只需要py的三分之一,甚至十分之一. js在客户端执行,py在后端执行,py要实 ...

  6. python连接mysql数据库封装

    源码: import pymysql class MysqlConnect(object): # 魔术方法, 初始化, 构造函数 def __init__(self, host, user, pass ...

  7. UML类图关系(转,添加了实例)

    UML类图关系(泛化 .继承.实现.依赖.关联.聚合.组合) 在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realization),关联(Associati ...

  8. Android基础部分再学习---activity的状态保存

    主要是bundle   这个參数 參考地址:http://blog.csdn.net/lonelyroamer/article/details/18715975 学习Activity的生命周期,我们知 ...

  9. Dubbo -- 系统学习 笔记 -- 示例 -- 只订阅

    Dubbo -- 系统学习 笔记 -- 目录 示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 只订阅 问题 为方便开发测试,经常会在线下共用一个所有服务可用的注册中心,这时,如 ...

  10. 联想一体机u盘启动设置

    开机启动按f12键,进入后,到最后一项exit把OS Optimized Defaults(操作系统优化的缺省值)改成Disabled(关闭). 再进入到Startup这一项,选择UEFI/Legac ...