设置height:100%无效的解决方法
设置height:100%无效的解决方法
刚接触网页排版的新手,常出现这种情况:设置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%}
注意
<body height='100%'>
这样没有效果
<body style='height:100%'>
这样有效果
设置height:100%无效的解决方法的更多相关文章
- 解决body设置height:100%无效问题
1. 解决html设置height:100%无效问题 通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决 ...
- table和div设置height:100%无效的完美解决方法
刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...
- html中设置height=100%无效的问题
设置height=100%(网页内容能够更好的适配各种屏幕大小) 第一种是设置某个单独的div元素 height=100%无效 原因很简单,所有基于本分比的尺寸必须基于父元素,而你如果没有设置父元 ...
- CSS中设置height:100%无效的解决方案
在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...
- D3js-绘制地图时出现过小, 设置scale还是无效 的解决方法
使用d3绘制某个地市的地图时,把scale成非常大但是还是无法达到想要的效果. //---------------------------------------------------------- ...
- 表格Table宽度设置无效的解决方法
表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...
- HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客
原文:HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HobHunter ...
- table布局 height=100%无效分析
(从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487 ...
- redhat linux enterprise 5 输入ifconfig无效的解决方法
redhat linux enterprise 5 输入ifconfig无效的解决方法 在安装完成linux后,进入终端,输入命令行ifconfig,会提示bash: ifconfig: comm ...
随机推荐
- ContentProvider中央档案馆,以及获取联系人电话的示例
Android官方文档介绍的数据存储方式共有五种,sqlite,SharedPreferences,网络存储,外储存储,文件存储,但是这些数据都无法进行共享,那么我们就引入了今天的主角:Content ...
- NSURLSession网络请求
个人感觉在网上很难找到很简单的网络请求.或许是我才疏学浅 , 所有就有了下面这一段 , 虽然都是代码 , 但是全有注释 . //1/获取文件访问路径 NSString *path=@"ht ...
- block为什么用copy以及如何解决循环引用
在完成项目期间,不可避免的会使用到block,因为block有着比delegate和notification可读性更高,而且看起来代码也会很简洁.于是在目前的项目中大量的使用block. 之前给大家介 ...
- Play Framework 项目遇到问题
1.Debug调试出错,提示: Error occurred during initialization of VMagent library failed to init: jdwpERROR: C ...
- 多War项目中静态文件的共享方案
[原创申明:文章为原创,欢迎非盈利性转载,但转载必须注明来源] 在互联网产品中,一般会有多个项目(Jar.WAR)组成一个产品线.这些WAR项目,因为使用相同的前端架构(jQuery.easyui等) ...
- SQL Server查询第31到40条数据
大致分为两种情况:ID连续和ID不连续. 1.ID连续的情况: 2.ID不连续的情况: (1).两次对表查询,效率较低. ID from A) (2).外层查询没有对表A进行查询,效率提高. ID f ...
- 关闭selinux
1.查看SELinux状态:getenforce Enforcing(启动) disable(禁用) 1.禁用SELinux(重启后依然生效) 修改 vi /etc/sysconfig/selinux ...
- 【FLUENT案例】02:DPM模型
1 引子1.1 案例描述1.2 学习目标1.3 模拟内容2 启动FLUENT并导入网格3 材料设置4 Cell Zones Conditions5 Calculate6 定义Injecions7 定义 ...
- Geeklink引领智慧新生活!
煤油灯成为古董,管道天然气进入厨房,电脑挤进生活,手机代替书信成为通讯的主要工具-这些变化无不提醒我们,时代在变迁,科技在发展.而最近朋友圈和电视又在播报智能家居的生活方式-智能家电能实现怎样的情景功 ...
- Java的JDBC操作
Java的JDBC操作 [TOC] 1.JDBC入门 1.1.什么是JDBC JDBC从物理结构上来说就是java语言访问数据库的一套接口集合,本质上是java语言根数据库之间的协议.JDBC提供一组 ...