父母與最小高度的孩子：100％不繼承高度

Question

我發現一種方法來使div容器至少佔據頁面的整個高度，通過設置min-height: 100%;。但是，當我添加嵌套div並設置height: 100%;時，它不會伸展到容器的高度。有沒有辦法解決它？

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
#containment { 
 
    min-height: 100%; 
 
    background: pink; 
 
} 
 

 
#containment-shadow-left { 
 
    height: 100%; 
 
    background: aqua; 
 
}

<div id="containment"> 
 
    <div id="containment-shadow-left"> 
 
    Hello World! 
 
    </div> 
 
</div>

Answer 1

這是一個WebKit的報道（鉻/ Safari瀏覽器）的錯誤，父母與最小高度的子女不能繼承height屬性：https://bugs.webkit.org/show_bug.cgi?id=26559

顯然Firefox是受到太大（不能在時刻IE測試）

可能的解決方法：

• 加載位置：相對於#containment
• 添加位置是：絕對到＃遏制陰影左

當內部元件具有絕對定位的錯誤不顯示。

見4月10日http://jsfiddle.net/xrebB/

編輯2014

由於我目前工作的一個項目，我真的需要父容器與min-height，和子元素繼承的高度容器，我做了更多的研究。

第一：我不太確定當前的瀏覽器行爲是否真的是一個錯誤。 CSS2.1規格說：

百分比是相對於 生成的框的包含塊的高度計算的。如果包含 塊的高度沒有明確指定（即，它取決於內容 高度），並且該元素沒有被絕對定位，則值 計算爲'auto'。

如果我把我的容器上的最小高度，我不明確指定它的高度 - 所以我的元素應該得到一個auto高度。這正是Webkit和所有其他瀏覽器所做的。

其次，我找到了解決方法：

如果我把我的容器元素display:table與height:inherit它的行爲完全一樣，如果我給它100的min-height％的方式相同。而且 - 更重要的是 - 如果我將子元素設置爲display:table-cell，它將完全繼承容器元素的高度 - 無論是100％還是更高。

完全CSS：

html, body { 
    height: 100%; 
    margin: 0; 
} 

#container { 
    background: green; 
    display: table; 
    height: inherit; 
    width: 100%; 
} 

#content { 
    background: red; 
    display: table-cell; 
} 

的標記：

<div id="container"> 
    <div id="content"> 
     <p>content</p> 
    </div> 
</div> 

見http://jsfiddle.net/xrebB/54/。

Answer 2

，讓Google：

這jQuery的解決辦法，使#containment自動獲得一個高度（通過高度：自動），然後得到分配爲像素值的實際高度。

<script type="text/javascript"> 
<!-- 
    $(function() { 

     // workaround for webkit-bug http://stackoverflow.com/a/8468131/348841 

     var rz = function() { 
      $('#containment') 
      .css('height', 'auto') 
      .css('height', $('#containment').height() + 'px'); 
     }; 

     $(window).resize(function() { 
      rz(); 
     }); 

     rz(); 

    }) 
--> 
</script> 

Answer 3

將height: 1px添加到父容器。適用於Chrome，FF，Safari。

Answer 4

嘗試過我們的！ chrome明白當我將顯示值設置爲內聯塊時，我希望子元素的高度爲100％。 btw設置浮動將導致它。

display:inline-block 

更新

這是行不通的。解決方案是獲取父節點偏移量高度，並在javascript頁面處使用它。

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

Answer 5

Kushagra古爾的解決方案確實（至少在Chrome和IE）的工作和不必使用display: table;和display: table-cell;解決了原來的問題。請參閱plunker：http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

在外部div上設置min-height: 100%; height: 1px;會導致其實際高度至少爲100％，如果需要。它也允許內部div正確地繼承高度。

Answer 6

我不相信這是一個瀏覽器的錯誤。所有的行爲都是一樣的 - 也就是說，一旦你停止指定明確的高度，最小高度基本上是「最後一步」。

這似乎是在CSS 2.1規範究竟是如何建議： http://www.w3.org/TR/CSS2/visudet.html#the-height-property

的比例相對於所生成的框的包含塊的高度計算。如果未明確指定包含塊的高度（即，它取決於內容高度），並且該元素沒有被絕對定位，則該值計算爲'auto'。

因此，作爲min-height父沒有一個明確的height屬性集，則默認爲自動。

有些方法可能通過使用display: table-cell或更新的樣式（如flexbox）（如果這可能適用於目標受衆的瀏覽器）。在某些情況下，您也可以通過在絕對定位的內部元素上使用top和bottom屬性來顛覆這一點，該屬性在不指定的情況下爲您提供100％的高度。

Answer 7

另一個JS解決方案，很簡單，可以用來避免非簡單的CSS或額外的標記/哈克解決方案。

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'); 
} 

角指令：

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> 

Answer 8

以爲我會分享這個，因爲我沒有看到這個地方，這是我用來解決我的問題lution。

SOLUTION：min-height: inherit;

我曾與一個指定的最低高度父母，我需要一個孩子也是高度。

.parent { 
 
    min-height: 300px; 
 
    background-color: rgba(255,255,0,0.5); //yellow 
 
} 
 

 
.child { 
 
    min-height: inherit; 
 
    background-color: rgba(0,255,0,0.5); //blue 
 
} 
 

 
p { 
 
    padding: 20px; 
 
    color: red; 
 
    font-family: sans-serif; 
 
    font-weight: bold; 
 
    text-align: center; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <p>Yellow + Blue = Green :)</p> 
 
    </div> 
 
</div>

這樣，孩子現在作爲高度的最小高度的100％。

我希望有些人覺得這有用:)

Answer 9

除了現有的答案，也有視單位vh使用。下面的簡單片段。當然，它也可以與calc()一起使用，例如， min-height: calc(100vh - 200px);當頁眉和頁腳有高度在一起時200px。

body { 
 
    margin: 0; 
 
} 
 

 
.child { 
 
    min-height: 100vh; 
 
    background: pink; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>