我找到了一种方法，使一个div容器占据至少一个页面的全部高度，通过设置最小高度:100%;。然而，当我添加一个嵌套的div并设置高度:100%;，它不会延伸到容器的高度。有办法解决吗?
Html, body { 高度:100%; 保证金:0; ｝ #控制{ 最小高度:100%; 背景:粉色; ｝ # containment-shadow-left { 高度:100%; 背景:水; ｝ < div id = "容器" > < div id = " containment-shadow-left " > 你好世界! < / div > < / div >
当前回答
这对我来说是适用的，基于百分比的身高和父母仍然根据孩子的身高增长。 在Firefox, Chrome和Safari中工作良好。
.parent { 位置:相对; 最小高度:100%; ｝ .child { 最小高度:100 vh; ｝ < div class = "父" > < div class = "孩子" > < / div > < / div >
其他回答
Kushagra Gour的解决方案确实有效(至少在Chrome和IE中)，并且无需使用display: table就解决了原来的问题;并显示:table-cell;。参见plunker: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU
设置min-height: 100%;身高:1 px;在外部div上，使其实际高度至少为100%。它还允许内部div正确继承高度。
另一个简单的JS解决方案，可以用来避免不简单的css或额外的标记/ hack解决方案。
function minHeight(elm, percent) {
var windowHeight = isNaN(window.innerHeight) ?
window.clientHeight : window.innerHeight;
var height = windowHeight * percent / 100;
elm.style.minHeight = height + 'px';
}
W/ jQuery:
function minHeight($elm, percent) {
var windowHeight = $(window).height();
var height = windowHeight * percent / 100;
$elm.css('min-height', height + 'px');
}
Angular指令:
myModule.directive('minHeight', ['$window', function($window) {
return {
restrict: 'A',
link: function(scope, elm, attrs) {
var windowHeight = isNaN($window.innerHeight) ?
$window.clientHeight : $window.innerHeight;
var height = windowHeight * attrs.minHeight / 100;
elm.css('min-height', height + 'px');
}
};
}]);
这样用:
<div>
<!-- height auto here -->
<div min-height="100">
<!-- This guy is at least 100% of window height but grows if needed -->
</div>
</div>
这对我来说通常是有效的:
.parent { 最小高度:100 px; 背景颜色:绿色; 显示:flex; ｝ .child { 高度:继承; 宽度:100%; 背景颜色:红色; ｝ <！DOCTYPE html > < html > 身体< > < div class = "父" > < div class = "孩子" > < / div > < / div > 身体< / > < / html >
添加这个到父组件为我修复了它:
display: flex;
flex-direction: column;
我不相信这是浏览器的bug。所有的行为都是一样的——也就是说，一旦停止指定显式高度，min-height基本上就是“最后一步”了。
这似乎正是CSS 2.1规范所建议的: http://www.w3.org/TR/CSS2/visudet.html#the-height-property
该百分比是根据生成的框的包含块的高度计算的。如果包含块的高度没有明确指定(即，它取决于内容高度)，并且该元素不是绝对定位，则该值计算为'auto'。
因此，由于min-height父类没有显式的height属性设置，它默认为auto。
有一些方法可以通过使用display: table-cell或新的样式(如flexbox)来解决这个问题，如果这对您的目标用户的浏览器可行的话。在某些情况下，您还可以通过在绝对定位的内部元素上使用top和bottom属性来改变这种情况，这将为您提供100%的高度而无需指定。
