html页面中DIV高度100%设置问题

cwr888

已于 2022-03-28 09:14:53 修改

阅读量4.1k

点赞数 1

分类专栏： html5 文章标签： html5

于 2022-03-28 09:05:02 首次发布

本文链接：https://blog.csdn.net/cwr888/article/details/123786402

版权

html5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

初学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>

特别注意html和body都要设置height: 100%，缺失任何一个，对div设置高度-height:100%时都不会生效。