Question

小提琴：

我正在尝试让每个div填充视口而不指定像素大小。我怎样才能做到这一点？目前，div只与它们内部的h1和p元素中的文本一样大。我尝试将高度设置为100％，并为html和body元素做同样的事情......

<title>mountains</title>
<body>
    <div id="denali" class="fullPageDiv">
        <h1>denali</h1>
        <p>Denali is the highest mountain in North America. Due to a disagreement between the Boards of Geographic Names in Alaska and the United States, the peak's official name is Denali according to Alaska and Mount McKinley according to the United States.</p>
    </div>
    <div id="mountlogan" class="fullPageDiv">
        <h1>mount logan</h1>
        <p>Mount Logan is the second tallest peak in North America.</p>
    </div>
</body>
</html>

Css：

body {
    font: 18px/30px Sans-serif; 
    margin: 0;
    padding: 0;
    min-height:1000px;
}

html {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

.fullPageDiv {
    position: relative;
    min-height: 100%;
    width: 100%;
    overflow: hidden;
}

#denali {
    background-color: red;
}

#mountlogan {
    background-color: green;
}

#citl {
background-color: yellow;
}

#mountsaintelias {
    background-color: blue;
}



#popo {
background-color: red; 
}

Answer 1

使用：

html, body {
    height: 100%;
}

而不是min-height。

<强> DEMO

Answer 2

如果我理解你的问题，你将不得不使用Javascript，包括jQuery＆amp;这段代码：

////Checks the viewport height and sets element's height accordingly.
$(".fullPageDiv").css({height:$(window).height()});                        

////If viewport ever re-sized or device (tablet for example) switched from portrait to landscape or vice versa.
                                      $(window).resize(function(){
 $(".fullPageDiv").css({height:$(window).height()});
});

以下是Fiddle

堆叠的整页div

2 个答案: