2

在这里提琴：

http://jsfiddle.net/JzbDj/

我试图让我的每个 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; 
}
4

2 回答 2

3

利用：

html, body {
    height: 100%;
}

而不是min-height.

演示

于 2013-06-20T22:13:51.320 回答
1

如果我正确理解了您的问题，您将不得不使用 Javascript，包括 jQuery 和此代码：

////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()});
});

这是小提琴

于 2013-06-20T22:15:42.917 回答