我找到了一种方法，使一个div容器占据至少一个页面的全部高度，通过设置最小高度:100%;。然而，当我添加一个嵌套的div并设置高度:100%;，它不会延伸到容器的高度。有办法解决吗?
Html, body { 高度:100%; 保证金:0; ｝ #控制{ 最小高度:100%; 背景:粉色; ｝ # containment-shadow-left { 高度:100%; 背景:水; ｝ < div id = "容器" > < div id = " containment-shadow-left " > 你好世界! < / div > < / div >
当前回答
虽然显示:伸缩;这里已经建议，考虑使用显示:网格;现在它得到了广泛支持。默认情况下，网格的唯一子节点将完全填充其父节点。
Html, body { 高度:100%; 保证金:0; 填充:0;/*不要忘记Safari */ ｝ #控制{ 显示:网格; 最小高度:100%; 背景:粉色; ｝ # containment-shadow-left { 背景:水; ｝
其他回答
为父容器添加高度:1px。工作在Chrome, FF, Safari。
添加这个到父组件为我修复了它:
display: flex;
flex-direction: column;
这对我来说通常是有效的:
.parent { 最小高度:100 px; 背景颜色:绿色; 显示:flex; ｝ .child { 高度:继承; 宽度:100%; 背景颜色:红色; ｝ <！DOCTYPE html > < html > 身体< > < div class = "父" > < div class = "孩子" > < / div > < / div > 身体< / > < / html >
另一个简单的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>
只是为了保持这个主题的完整，我发现了一个解决方案没有探索这里使用固定位置。
没有溢出
Html, body， .wrapper， .parent， .child { 位置:固定; 上图:0; 底部:0; 左:0; 右:0; 保证金:0; 填充:0; 高度:100%; ｝ .child { 溢出:汽车; 背景:灰色; } .height-50 { 高度:50%; 宽度:5 em; Margin: 10px auto; 背景:青色; ｝ < div class = "包装" > < div class = "父" > < div class = "孩子" > < div class = " height-50 " > < / div > < / div > < / div > < / div >
与溢出
Html, body， .wrapper， .parent， .child { 位置:固定; 上图:0; 底部:0; 左:0; 右:0; 保证金:0; 填充:0; 高度:100%; ｝ .child { 溢出:汽车; 背景:灰色; ｝ .height - 150 { 高度:150%; 宽度:5 em; Margin: 10px auto; 背景:青色; ｝ < div class = "包装" > < div class = "父" > < div class = "孩子" > < div class = "身高- 150 " > < / div > < / div > < / div > < / div >
