html页面中DIV高度100%设置办法

洪七公 · 发表于 2023-4-16 11:41:19

实际这个问题是一个非常简单的问题，但是新手来讲，设置不生效的原因还是一定要了解的！

html和css中比较严格的一点是，div标签里面的子标签一定要在父标签设置同样规格的情况下才会生效的

初学HTML5，需要实现网页DIV左右居中，高度自动填充到100。发现对页面中DIV设置100%高度属性时无效。后来查资料发现HTML网页中div高度继承自父元素——》body——》html
因此解决方案是先对html和body设置100%高度：
html,body { height: 100%;margin: 0; padding: 0;}
然后对应的div设置高度—height:100% 则可以生效。测试例子(DIV左右居中，高度自动填充到100)如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV百分百设置测试</title>
</head>
<style type="text/css">
html, body {
width: 500px;
height: 100%;
margin:0 auto;padding:0px
}
</style>
<body>
<div style="width:100%; height:100%;" >
<Iframe name="tt" style="height:95%; width:95%;border:1px solid #000" src="" marginwidth="0" marginheight="0" scrolling="none" frameborder="0"></Iframe>
</div>
</body>
</html>

复制代码

自己测试一下就看到效果了！

感谢大家对锦尚中国的支持与厚爱！更多资源内容请搜索源码论坛获取！

		自动登录	找回密码
密码			会员注册

[CSS/Html] html页面中DIV高度100%设置办法