刚接触网页排版的新手，常出现这种情况：设置table和div的高height="100%"无效，使用CSS来设置height:"100%"也无效，为什么会这样呢？解决height:100%无效，table和div的解决方法并不相同。

首先说一下table，他比较容易解决，当我们使用Dreamweaver来制作网页，新建一张网页，通常在代码头部会有类似以下的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
没错，你猜对了，问题就出在这里，你试着把这短代码删除，然后再刷新一下网页，你就会看到所有table以你的设置height="100%"的展示！
这段代码是告诉浏览器你的网页是遵循什么标准的，如上面的“W3C”标准，删除掉一般是不影响的。
下面说一下div，div和table一样，如果要实现width:100%是很容易的，但要div的height:"100%"，它就不大听话了，其实不是它不听话，是你不知道让它听话的方法。如下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试</title>
</head>
<body>
<div style="height:100%"></div>
</body>
</html>
就算和Table一样去掉头部的那段代码也不能100%显示，原因很简单，你让div的height="100%"，执行网页时，css先执行到，而整个网页中的内容还没有完全载入，是获取不到div外面的<body>等的高度的，所以height="100%"也就不能如愿显示了。加上
body{height:100%}
就轻松解决啦，一开始就让body以100%显示，他的下级div自然就100%的，不过对于FF浏览器还应该把HTML也先给height:100%，即
html,body{height:100%}
这样div就听话了：D

table和div设置height:100%无效的完美解决方法的更多相关文章

  1. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  2. 解决body设置height:100%无效问题

    1. 解决html设置height:100%无效问题 通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决 ...

  3. html中设置height=100%无效的问题

    设置height=100%(网页内容能够更好的适配各种屏幕大小) 第一种是设置某个单独的div元素   height=100%无效 原因很简单,所有基于本分比的尺寸必须基于父元素,而你如果没有设置父元 ...

  4. CSS中设置height:100%无效的解决方案

    在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS  height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...

  5. HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客

    原文:HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HobHunter ...

  6. table布局 height=100%无效分析

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487 ...

  7. [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

  8. css菜鸟之HTML 中块级元素设置 height:100% 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

  9. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

随机推荐

  1. ASP.NET使用后台更改前台Style

    首先是后台给前台设置Style属性,设置控件坐标 前台控件: <asp:Label ID = "lblDSRText" Text = "当事人" runa ...

  2. Unity-Animator深入系列---测试CrossFade和CrossFadeInFixedTime

    回到 Animator深入系列总目录 CrossFade是按照动画的自身时间进行混合.如果动画10秒,混合持续时间0.2,会在2秒后混合完成 CrossFadeInFixedTime是按照实际时间进行 ...

  3. selenium + python 添加等待时间

    转载于:http://www.blogjava.net/qileilove/articles/412450.html 四.添加等待时间 有时候为了保证脚本运行的稳定性,需要脚本中添加等待时间. 4.1 ...

  4. Collection的toArray()使用上需要注意的地方

    转载:http://llade.iteye.com/blog/199818 Collection在很多情况下需要转换为数组来处理(很多接口方法都使用array作为参数). Collection的toA ...

  5. javascript中set与get方法详解

    其中get与set的使用方法: 1.get与set是方法,因为是方法,所以可以进行判断. 2.get是得到 一般是要返回的   set 是设置 不用返回 3.如果调用对象内部的属性约定的命名方式是_a ...

  6. jquery easyui datagrid使用参考

    jquery easyui datagrid使用参考   创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...

  7. MUI 个推

    个推 四种消息模板(透传消息模板.点击通知打开网页模板.点击通知打开应用模板.点击通知栏弹框下载模版) 三种推送方式(对单个用户推送接口 | 对指定用户列表推送接口 | 对指定应用群推接口) 四种消息 ...

  8. ContentProvider官方教程(9)定义一个provider完整示例：实现方法，定义权限等

    Creating a Content Provider In this document Designing Data Storage Designing Content URIs Implement ...

  9. 传递给系统调用的数据区域太小。 (异常来自 HRESULT:0x8007007A)

    在做结构体向字节数组转换的时候,常遇到"传递给系统调用的数据区域太小"的错误,究其原因是因为英文与汉字的编码方式不同,一个汉字等于两个字节,而一个英文字母等于1个字节.所以,对于如 ...

  10. Queue 应用——拓扑排序

    1. 拓扑排序 题目描述:对一个有向无环图(Directed Acyclic Graph, DAG)G进行拓扑排序,是将G中所有顶点排成线性序列,是的图中任意一堆顶点u和v,若边(u, v)在E(G) ...