如何使div容器占据屏幕的整个高度？

Question

好吧,我正在制作我的第一个iOS HTML5应用程序,它只是一个简单的报价应用程序.我需要弄清楚如何让我的容器div成为iphone的全高.这是我设计的jsfiddle - http://jsfiddle.net/gKaDL/1/

.container {
width: 640px;
min-height: 100%;
background-size: cover;
background-position: center;
background-color: #1a1a1a;
}

因为很多报价很短,容器div不会达到iPhone 4屏幕高度960px,更不用说iPhone 5的1136px高度了.容器div必须是屏幕的大小或更大,因为它上面有一个必须填满屏幕的背景图像.

谢谢.

Answer 1

你有一个CSS单位vh,它在视口高度的几十分之一.在这种情况下你会写:

height: 100vh;

或者,您可以强制div粘贴到最近定位的父级的顶部和底部(因此,给予position:relative或position: absolute具有适当高度的父级):

position: absolute;
top: 0;
bottom: 0;

告诉我你是否需要更多细节