为父容器添加高度:1px。工作在Chrome, FF, Safari。

我想我会分享这个，因为我在任何地方都没有看到这个，这是我用来修复我的解决方案。

解决方案:min-height:继承;

我有一个父结点有一个指定的最小高度，我需要一个子结点也有这个高度。

.parent { 最小高度:300 px; background - color: rgba(255255年,0,0.5);/ /黄色 ｝ .child { 最小高度:继承; background - color: rgba(0255年,0,0.5);/ /蓝色 ｝ p { 填充:20 px; 颜色:红色; 字体类型:无衬线; 粗细:大胆的; text-align:中心; ｝ < div class = "父" > < div class = "孩子" > <p>黄色+蓝色=绿色:)</p> < / div > < / div >

这样，子节点现在就相当于最小高度的100%。

我希望有些人会觉得这有用:)

在尝试了我们的之后!chrome理解，当我设置显示值为inline block时，我希望子元素的高度为100%。顺便说一句，设置浮动会导致它。

display:inline-block

更新

这行不通。解决方案是获得parentnode offsetheight，并使用它在页面的和javascript。

<script>
    SomedivElement = document.getElementById('mydiv');
    SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + 'px';    
</script>

另一个简单的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>

为父容器添加高度:1px。工作在Chrome, FF, Safari。

这是在@jackocnr的评论中添加的，但我错过了。对于现代浏览器，我认为这是最好的方法。

如果容器太小，它会让内部元素填充整个容器，但如果容器太大，它会扩展容器的高度。

#containment {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#containment-shadow-left {
  flex: 1;
}