Question

我想知道，在制作一个网页时，第一部分是100％高度，其余部分是不同的尺寸。

如何使第一部分成为视口的100％高度并同时使其响应？

Answer 1

我建议使用JavaScript而不是试图破解CSS来做你想做的事情。它应该是一个相当简单的3行文档就绪函数调用。

E.g。

$( document ).ready(function() {
    $('#top-content').height( $(window).height() );
});

您还可以收听浏览器调整大小事件，以便在更改时调整大小。

function resizeTopContent(){
    $('#top-content').height( $(window).height() )
}

$(document).ready(function() {
    resizeTopContent();
});

$(window).resize(function() {
    resizeTopContent();
});

Answer 2

为什么不使用CSS“视口单元”属性。

<div id="fullSize">Body Content</div>


#fullSize {
  height: 100vh;
  width: 100vw;
}

http://caniuse.com/#feat=viewport-units

视口单元为您提供了一种根据设备大小扩展设计的方法。最好的吗？它会在调整屏幕大小时立即调整分辨率。

值以百分比（从1到100）给出。

以下是您可以使用的VP单位。

vh：VP高度
vw：VP宽度
vmin：VP min height
vmax：VP max height

Answer 3

将html,body{height: 100%;}添加到您的css中，DIV可以设置为视口的100％高度。

div部分100页高度的一页网站

3 个答案: