body、html、视口三合一

如果想让body、html和视口三合一,要让高度一层一层继承下来。

pc端下

高度自适应下,PC中html、body设置高是100%,则html、body的height为可视窗口的高,它两个的高度随可视窗口高度变化而变化。

如果不设置100%,高度是内容高度和视窗高度较大的一个。

移动端下

移动端下html、body设置高为100%,则高为设备的高度也就是移动设备的视口高为定值。

如果不设置100%,高度是内容高度和视窗高度较大的一个。

存在的BUG:

可能高度由内容高决定,在弹性布局时会导致overflow:scroll设置滚动条失效,因为高度是内容高度,永远不会超出从而形成滚动条。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            html{
                margin:30px;
                border:1px solid red;
                height: 100%;
            }
            body{
                margin:30px;
                border:1px solid black;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div style="height: 1000px;" >
            
        </div>
    </body>
</html>

body、html、视口三合一

 

body、html、视口三合一

上一篇:lucene中的一些名词的解释


下一篇:HTML事件