html - 堆叠的整页 div

在这里摆弄:

我试图让每个 div 填充视口(viewport)，而不指定像素大小。我怎样才能做到这一点？目前，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; 
}

最佳答案

用途: