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

最新推荐文章于 2023-06-03 20:47:07 发布
最新推荐文章于 2023-06-03 20:47:07 发布
阅读量8.5k 收藏 3
点赞数
文章标签： table div dreamweaver xhtml html 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/majin_com/article/details/6318499
版权

刚接触网页排版的新手，常出现这种情况：设置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%'>

这样有效果

majin_com
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于table的width:100%和margin导致溢出
12-10
table { width:100%; height:252px; background:url(img/smbg.jpg) 0 0 repeat-x; margin:10px;} 表格撑破了外层。 原来width:100%时不能用margin，否则会溢出。 在网上搜了一下关于width:100%的解释，还是不太...
DIV的CSS height:100%无效的解决办法
lz305263的博客
12-08 759
在设置DIV高度的时候，会用到一个height:100%的大小，来让div撑满浏览器高度。但是我们会发现，直接在div中写上“style:"height:100%;"”是无效的。 那么如何才能让div的css height:100%生效呢？解决办法很简单，同时也能适配多个浏览器。 方法就是在css当中增加上： html, body{ margin:0; height:100%;
element table组件根据屏幕大小动态设置max-height属性设置表格最大高度，但设置百分比或者响应式不生效的问题
二三的博客
12-06 1万+
element的table表格组件有一个max-height属性，可以设置table的最大高度，但是当我设置这个属性的值为百分比或者响应式的时候，却没有生效，如下所示。 max-height:calc(100vh - 40px) //或者 max-height:calc(100% - 40px) 这是因为element-ui的文档，max-height的合法的值为数字或者单位为 px 的高度。无法识别响应式的css。 解决方法有以下几种： 首先列举出代码： 首先设置table组件的ref属性，以及设.
table布局 height=100%无效分析
超越梦想的专栏
08-02 6006
table布局 height=100%无效分析 在使用table表格进行页面布局时，经常使用将表格高度设置style="height:100%"来实现表格高度满屏效果，但在最新的浏览器中经常遇到无效，根本原因再于浏览器使用用的工作模式的不同造成的；在Firefox与IE8标准模式下，HTML与Body标签默认是没有高度（即高度为0） ，而是根据其中的内容自适应，如果设置表格的style="hei
table布局 height=100%无效分析（原创）
weixin_33921089的博客
05-07 361
在使用table表格进行页面布局时，经常使用将表格高度设置style="height:100%"来实现表格高度满屏效果，但在最新的浏览器中经常遇到无效，根本原因再于浏览器使用用的工作模式的不同造成的；在Firefox与IE8标准模式下，HTML与Body标签默认是没有高度（即高度为0） ，而是根据其中的内容自适应，如果设置表格的style="height:100%"，达不到全屏效果。 问题分析：...
table设置背景图片，不能100%显示解决方法
09-28
table设置背景图片，不能100%显示是一个让人头痛的问题，还好在网上找到了解决方法，有需要的朋友可以参考下
详解在table设置max-width以及min-width兼容问题和解决方案
01-18
在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
el-table设置表格高度无效
weixin_44692296的博客
01-13 7659
设置表格高度，官网给的很详细 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 因为我的项目表格的列，是请求后台后，拿到数据才进行渲染的，也就是动态的，所以在项目中遇到，即使我设置了表格高度，渲染出来的表格高度依然没有高度，但是只要我屏幕缩放，高度就会生效。 效果如图： 是通过css解决的，代码如下： /deep/.el-table{ .el-table__body-wrapper{ height: calc(100% - 48px)!i
在el-tabs中echarts图表宽高设置style=“width: 100%； height: 100%“不起效变成100px的问题
热门推荐
老男孩的博客
01-14 6万+
出现的问题 在开发过程中发现el-tabs在默认页echarts正常显示，其他页中echarts设置的宽高为100%不起效，最后都是100px 问题原因 echarts绘制图表计算宽度的时候，由于第二个及后面的tab的属性display: none; 所以无法获取到clientWidth，而 parseInt(stl.width, 10)) 将width: 100%;转为100，所以计算出的图表宽度高度为100px。 解决方案 结合v-if，将echarts绘图封装成一个组件，然后在el-tab中
height标签的TABLE属性不被支持——关于HTML关于表格高度无法设置百分比的问题
A_No2Tang的博客
11-15 1285
针对“height标签的TABLE属性不被支持”或表格无法实现在高度上全屏显示的问题，本文提出了两种解决方案。
html中设置height=100%无效的问题
weixin_30633949的博客
06-14 308
设置height=100%（网页内容能够更好的适配各种屏幕大小） 第一种是设置某个单独的div元素 height=100%无效 原因很简单，所有基于本分比的尺寸必须基于父元素，而你如果没有设置父元素尺寸的大小就会失效，这里我们设置<body>height=100%,有时候这样设置也是无效的，因为body的父元素html没有设置，没有设置的尺寸默认为0 x 0 像素，所有一般加上...
elementui随记
zxxAdela的博客
02-17 688
element ui随记
设置height:100%无效的原因以及两种解决方法
小多的博客
01-04 1万+
原因：我们知道在把盒子宽度自适应为浏览器窗口宽度，只需设置width:100%就可轻松解决问题，但是让盒子的高度自适应浏览窗口的高度并非那么容易，这是因为css内部计算的原因 <!-- 高度实际为字体大小 --> <div class="box" style="width:100%;height:100%;background-color:red;"> width:100%;height:100%; </div> 解决方法一：设置父元素高度 html, bod
为什么设置height:100%有时没有生效的原因
jian091309的博客
04-23 3422
为什么设置height:100%有时没有生效的原因
el-table max-height 无法设置百分比高度 导致滚动条出不来解决
qq_45498438的博客
06-03 1301
var div = document.getElementById("给自己组件设置个不会冲突的Id");el官方对这个属性的介绍是，绝对值。无法使用百分比值，对做小组件不是很友好。2.js获取元素高度，动态设置表格高度tableHeight。1.给自己组件设置个不会冲突的Id。
<head> <title>可点击放大的表格</title> <style> table { border-collapse: collapse; } td { border: 1px solid black; padding: 10px; text-align: center; } img { max-width: 100%; max-height: 100%; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; } .overlay img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; border: 5px solid white; box-shadow: 0 0 10px black; } </style> </head>
最新发布
06-12
这是一个包含样式的HTML文件中head标签的部分内容。具体来说，这段代码定义了一个可点击放大的表格，并对表格和图片进行了样式设置。其中，样式的具体解释如下： - `table { border-collapse: collapse; }`: 设置表格的边框为合并边框，使得表格边框更美观。 - `td { border: 1px solid black; padding: 10px; text-align: center; }`: 设置表格单元格的边框样式为黑色实线，设置单元格内部的填充为10像素，设置单元格内部文本的对齐方式为居中。 - `img { max-width: 100%; max-height: 100%; }`: 设置图片的最大宽度和最大高度均为100%，保证图片在放大时不会失真。 - `.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; }`: 定义一个覆盖整个网页的遮罩层，使得放大的图片可以覆盖在上面。遮罩层的颜色为半透明的黑色，初始状态为不可见。 - `.overlay img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; border: 5px solid white; box-shadow: 0 0 10px black; }`: 定义放大后的图片的样式。该图片的定位方式为绝对定位，使得图片可以覆盖在遮罩层之上。图片的位置为屏幕中央，通过CSS3的transform属性来实现。图片的最大宽度和最大高度均为90%，使得图片不会过大。图片的边框为白色实线，宽度为5像素，边框颜色为白色，边框外面还加上了黑色的阴影，使得图片更加突出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值