嵌套的div上的高度爲100％

我有一個固定的高度包裝（由javascript使用window.innerHeight設置），我有一個嵌套的div系列生成的cms我正在使用。非常深的嵌套，我的網絡結構。問題是，如果我向網絡結構的div添加百分比高度，那麼在到達包裝器之前會有太多空白div，並且它不起作用。我的網頁結構之前的div只有動態id，我不能使用它們。嵌套的div上的高度爲100％

我在這裏重現一個很簡單的例子：http://jsfiddle.net/omegaiori/BXwcP/1/

的HTML

<div class="wrapper"> 
<div class="mmm"> 
    <div></div> 
    <div class="him"></div> 
</div>

的CSS

.wrapper { 
    width:500px; 
    height:500px; 
    background:red; 
} 
.him { 
    width:50%; 
    height:50%; 
    background:yellow; 
} 
/* only works if you uncomment this 
.mmm {height:100%} 
*/

如評論所說，我必須給高度：在達到我的所有嵌套div之前100％（應該有5的高度） 0％）。

有無論如何這種行爲可以繞過嗎？

非常感謝

來源

2013-10-29 valerio0999

格him需要50％的高度和其母公司DIV的寬度，父DIV是mmm，它的高度和寬度0 0 50％0

來源

2013-10-29 17:32:49

確定只是想這種確認 – valerio0999

當你定義一個基於百分比寬度/高度的元素，家長的尺寸也需要被指定。

設置.him到width:50%和height:50%是相當無用的，如果父母的尺寸沒有設置。由於0的50％也是0，所以你沒有看到它。在這種情況下，您需要在父級上設置高度/寬度，在這種情況下爲.mmm。

由於尺寸已在.wrapper上設置，因此您可以將其用作父級。看到這個jsFiddle here

這將工作，假設您將元素放置在預定義維度的父項內。 See this jsFiddle。

來源

2013-10-29 17:32:04

雖然這是一個有點哈克，你可以我們jQuery（或原生JavaScript）設置父裝載後的子div的高度？

http://jsfiddle.net/remus/BXwcP/3/

$(document).ready(function() { 
    $('.him').css("height", $('.wrapper').height()/2); 
});

來源

2013-10-29 17:36:36 brandonscript

嵌套的div上的高度爲100％

回答

相關問題