Html设置html与body元素高度问题

----------------------只给body设置高度100%仍然无效----------------

!DOCTYPE html
html
    head
        meta charset="UTF-8"
        title/title
        style type="text/css"
            body{
                height:100%;
            }
        /style
    /head
    body
        div id="" style="border: 1px solid green;height: 30%;"
            div1
        /div
        div id="" style="border: 1px solid green;height: 30%;"
            div2
        /div
        div id="" style="border: 1px solid green;height: 30%;"
            div3
        /div
    /body
/html

结果:

-----------------------同时给html与body设置100%----------------------

!DOCTYPE html
html
    head
        meta charset="UTF-8"
        title/title
        style type="text/css"
            html,body{
                height:100%;
            }
        /style
    /head
    body
        div id="" style="border: 1px solid green;height: 30%;"
            div1
        /div
        div id="" style="border: 1px solid green;height: 30%;"
            div2
        /div
        div id="" style="border: 1px solid green;height: 30%;"
            div3
        /div
    /body
/html

结果:

总结:

  百分比的宽度是相对于其父元素而言,一种方法用单位明确指定父元素的高度,另一种办法就是上面介绍的从html,body开始用百分比继承。html的百分比是相对于浏览器而言,其他是相对于其父元素而言。也就是说应该养成一个好的习惯,写html网页时候上来就把html,body{height:100%}写上去。这样后面的div就可以用百分比起作用了。

Html设置html与body元素高度问题

原文地址:http://www.cnblogs.com/qlqwjy/p/7284365.html


最新回复(0)
/jishuHLYO_2FMoejAwRHcoEEgk_2BEOtRe9Mbq0TiO30CQA_3D_3D4719174
8 简首页