2

我正在建立响应式网站。我不想在 px 中设置默认高度，但我想要这样的东西。这将只是布局的顶部。例如prowly.com。

在此处输入图像描述

还有我的小提琴：

http://jsfiddle.net/QVxW8/1/

        html, body {
            margin: 0;
            padding:0;
        }
        div#handler {
            width: 100%;
            height: 110%;
            display:block;
        }
        div#content {
            width: 100%;
            height:100%;
            background: red;
        }
        div#content2 {
            width: 100%;
            height: 10%;
            background: blue;
        }

HTML

<body>
    <div id="handler">
        <div id="content">I want to 100% height of browser</div>
        <div id="content2">I want 10% of height browser</div>
    </div>
</body>

附言。正如我所看到的，Safari iPhone 和 Opera Mobile 上 100% 的高度都是错误的，所以我不知道该怎么办。当然我可以使用 JS 但我想知道还有其他方法吗？

4

4 回答 4

2

尝试html, body像这样添加 100% 高度：

html, body {
        height: 100%;
        margin: 0;
        padding:0;
    }

JSFIDDLE

编辑：您可能想阅读这篇文章。

于 2013-08-26T16:58:50.737 回答
2

你需要像这样设置身体

html, body {
                margin: 0;
                padding:0;
                position:absolute;/* this is very important*/
                bottom:0;
                top:0;
                right:0;
                left:0;
            }

演示：http: //jsfiddle.net/QVxW8/5/

或像这样：

html, body {
                margin: 0;
                padding:0;
                position:absolute;/* this is very important*/
                left:0;
                top:0;
                width:100%;
                height:100%;
            }

并使用正确的值

*{
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

或者只是将您的代码更改为

html, body {
                margin: 0;
                padding:0;
                height:100%;
            }

演示：http: //jsfiddle.net/QVxW8/6/

于 2013-08-26T17:25:04.353 回答
0

试试这个

*{padding: 0; marign:0;}
      html, body {
            margin: 0;
            padding:0;
        }
        div#handler {
            width: 100%;
            height: 110%;
            display:block;
        }
        div#content {
            width: 100%;
            height:100%;
            background: red;
        }
        div#content2 {
            width: 100%;
            height: 10%;
            background: blue;
        }
于 2013-08-26T16:58:42.407 回答
0 
   html, body {
        margin: 0;
        padding:0;
    }
    div#handler {
        width: 100%;
        height: 100vh;
        display:block;
    }
    div#content {
        width: 100%;
        height:90%;
        background: red;
    }
    div#content2 {
        width: 100%;
        height: 10%;
        background: blue;
    }

这里的技巧是使用 VH 作为设备高度或使用 VW 作为设备宽度而不是 % 或 px

于 2020-12-17T18:48:48.213 回答