在网站加载之前根据设备高度设置div的最小高度的问题

Question

这必须是css问题最简单的情况.但我找不到解决这个问题的方法..

我有一个主要的div,它具有一定的最小高度.我已经给出了最小高度,%所以没有外部div,它不会显示min-height.如果我给出最小高度px,它会出现.

但我试图让最小高度达到窗口高度的50%,并且每个设备都可以有所不同,所以在px中给出高度不是我的选择...如果我给出jquery.css()功能,并保持document.ready()功能,当页面开始加载,它将具有零高度,它将降低到我指定的高度,并且在网站上看起来不太好..

案例1:http://jsfiddle.net/pT56y/

FIDDLE示例

案例2:http://jsfiddle.net/pT56y/2/ 有没有正确的方法来处理这个问题？

Answer 1

为了使用百分比高度,父级必须具有设置的高度(以像素或%为单位):

body,html{
    height: 100%;
}
.container-fluid{
    background:#000000;
    width:100px;
    min-height:50%;    
}

小提琴