刚接触网页排版的新手,常出现这种情况:设置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%}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style type="text/css">
html { height: 100%}
body {height:100%;margin:0px;padding:0px}
table{height: 100%;width: 100%;}
</style>
</head>
<body>
<table border=1>
<tr>
<td>
<ul>
<li>12
<li>34
</ul>
</td>
<td>
<iframe name="" src="" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
</body>
</html>
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/majin_com/archive/2011/04/12/6318499.aspx
分享到:
相关推荐
table { width:100%; height:252px; background:url(img/smbg.jpg) 0 0 repeat-x; margin:10px;} 表格撑破了外层。 原来width:100%时不能用margin,否则会溢出。 在网上搜了一下关于width:100%的解释,还是不太...
问题:在微信小程序中使用scroll-view标签时,用height:cale(xx – xx)设置高度无效,在page中设置高度为百分百依旧无效 解决办法:直接在最大的view标签中设置高度为百分百即可 <!-- 视频列表 --> ...
.w-table{ height: 100%; width: 100%; float: left; } /* 拖动过程中,鼠标显示样式 */ .w-table_moving .el-table th .thead-cell{ cursor: move !important; } .w-table_moving .el-table__fixed{ ...
在table中设置min-width和max-width...解决方案:在table外层包一个div,在div上设置min-width和max-width <div class=table-wrap> <table> <tr><td>1</td><td>2</td></tr> </table> </div> .table-wrap{width:5
width:100%; height:26px; line-height:26px; font-size:20px; font-color:black; font-weight:900; letter-spacing:5px; } .table0 thead td { text-align:center; vertical-align:middle; height:20px;...
在几个 web 项目中,我们需要开发一个固定的页脚和一个登录屏幕。 考虑到这一需求,编写此代码是为了作为包含此类场景的项目的基础。 CSS html , body { margin : 0 ; padding : 0 ; height : 100 % ; } . ...
在以前的网页中,table用height:100%是可以整屏的,但在网页头部增加: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
height: 100%; } body { font-family:Arial, Helvetica, sans-serif; background:url(../images/bg2.jpg)no-repeat; background-color:#FFF; -webkit-background-size: cover; -moz-background-size: cover...
最基本的JAVA脚语言<div id="promptBar" style="position:fixed; top: 0px; left: 0px; width: 100%; height:100px; text-align: center"> <table style="border: 2px black solid;width:100%; height:100%">
在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效,下面有详细的解决方法,大家可以学习学习
table转div工具,很棒的工具,直接把table转为div+css
Table会影响其内部的某些布局属性的生效(比如里的元素的height:100%) (这会限制你页面设计的自由性。) 一旦学了CSS知识,你会发现使用table做页面布局会变得更麻烦。 (先花时间学一些CSS知识,会省去你以后大量的...
<table border="0" align="center" background="Image/login.jpg" style="width: 455px; height: 250px"> <td style="width: 455px; height: 250px"> <table width="455px" border="0"> ...
link rel =" stylesheet " type =" text/css " href =" css/divTable.css "/> < script type =" text/javascript " src =" js/divTable.js " > </ script > ##2。 定义表和列的大小 # tableTest {...
真响应表 在it doesn't work on mobile, it doesn't work,的日子里it doesn't ... 对于100%响应的表,该存储库是我的解决方法,该表可以处理您抛出的任何数据集。 在移动视口中,它将结构从列式表更改为逐行概览摘要。
font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:...
table { max-width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0; } .table { width: 100%; margin-bottom: 18px; } .table th, .table td { padding: 8px; line-height: ...
电子商务源码<body style="background-color:#ebf4fd"> <center><div style="width:770px; margin-top:20px;... <th height="22" sytle="line-height:150%" style="background-color: #E3EFFB">
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.