使div與顯示：表具有100％的父div的高度

我想用display:table填充其父div的100％。這裏是div結構：使div與顯示：表具有100％的父div的高度

<div id="container"> 
    <div id="header"></div> 
    <div id="body"> 
     <div id="mytablediv"> 
    <div class="row"> 
      <div id="left"> </div> 
      <div id="content">&nbsp; </div> 
       <div id="right"> </div> 
      </div> 
     </div> 
    </div> 
    <div id="footer"></div> 
</div>

這裏是CSS：

html, body { margin:0; padding:0; height:100%; } 
#container { min-height:100%; position:relative; } 
#header { background:#ff0; padding:10px; } 
#body { padding:10px; padding-bottom:60px; } 
#footer { position:absolute; bottom:0; width:100%; height:60px;background:#6cf; 
} 
#mytablediv { display:table; } 
#row { display:table-row; } 
#left, #content, #right {display:table-cell;} 
#left, #right {background-color:red;}

這是我的全部代碼。現在我真正想要做的#mytablediv是填充頁眉和頁腳之間的整個空白區域。

這是live jsFiddle example。

來源

2012-11-28 jinni

身高：100％爲#body，以及標記。 –

對於要在#mytablediv（或任何其他元素）上工作的百分比高度，它的父級必須在其上設置某種height。該父母的height也可以是一個百分比，但是，在這種情況下，要使用該百分比，它自己的父母（#mytablediv的祖父母）也必須設置某種類型的height。這一直到html元素。

在你的情況，如果你想#mytablediv有頁面（窗口實際上）的height的100%，那麼你會希望「特定height」是100%上的所有祖先。

html, body, #container, #body { height: 100% } 

//now this works 
#mytablediv { 
    height: 100%; 
}

下面是一個例子：http://tinkerbin.com/UBfgrRz5

來源

2012-11-28 17:11:40 banzomaikaka

身高：100％在這種情況下效果並不理想。因爲還有兩個div，頁眉和頁腳。並且高度100％使內容高度爲100％。應該發生什麼是標題+內容+頁腳= 100％高度 – jinni

你可以在這裏使用inheritance財產，只是使用#mytablediv

#mytablediv { 
    height: inherit; 
}

您已指定div#container爲100％的高度以下，則需要將以上屬性分配到div#body以獲得所需結果。

來源

2012-11-28 17:22:18 mtk

雖然它的父級沒有指定高度。它的父母是'div＃body'，而不是'body'。 – animuson

哦......我誤讀了。謝謝你指出。 – mtk

Atlast，我決定爲jQuery工作。

function heightAutomate() { 
    var bodyHeight = $("body").height(); 
    var viewportHeight = $(window).height(); 
    var shudbe_bf_Height = $("body").height() - 153; /*153:height of div+footer*/ 
    var real_bf_Height = $("#mytablediv").height(); 

    if (real_bf_Height < shudbe_bf_Height) { 
     $("#bodyfix").css({"height":shudbe_bf_Height}); 
    } 
}

來源

2012-11-29 11:57:04 jinni

爲了達到預期的效果，您應該使用HTML部分略有不同的結構。我面臨着同樣的問題，我使用的解決方案，因爲它是在此描述：

http://jsfiddle.net/92y9L/

相關的代碼：

CSS

*{ 
    margin:0; 
    border:0; 
    padding:0; 
} 
.outer 
{ 
    position:relative; 
    width:250px; 
    height:350px; 
    border:1px dotted black; 
    margin:-1px; 
} 
.tbl 
{ 
    display:table; 
    width:100%; 
    height:100%; 
} 
.tr 
{ 
    display:table-row; 
} 
.td 
{ 
    display:table-cell; 
    margin:0 auto; 
    text-align:center; 
} 
.tr .body-outer 
{ 
    height:100%; 
    width:100%; 
} 
.body-outer 
{ 
    position:relative; 
} 
.body-inner 
{ 
    position:absolute; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    overflow-y:auto; 
    overflow-x:auto; 
} 
.stretch-x 
{ 
    width:100%; 
} 
.stretch-y 
{ 
    height:100%; 
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<body> 
<div class="outer"> 
<div class="tbl"> 
    <div class="tr" style="background-color:Red;"> 
     <p>test paragraph. This is used as placeholder<br />new line....</p> 
    </div> 
    <div class="tr stretch-y" style="background-color:Gray;"> 
     <div class="td stretch-y" style="background-color:Blue;"> 
      <div class="body-outer" style="background-color:Green;"> 
       <div class="body-inner"> 
       <p style=" white-space:nowrap;">test paragraph. This is used as placeholder<br />new line....</p> 
       <p>test paragraph. This is used as placeholder</p> 
       <p>test paragraph. This is used as placeholder<br />new line....</p> 
       <p>test paragraph. This is used as placeholder</p> 
       <p>test paragraph. This is used as placeholder<br />new line....</p> 
       <p>test paragraph. This is used as placeholder</p> 
       <p>test paragraph. This is used as placeholder<br />new line....</p> 
       <p>test paragraph. This is used as placeholder</p> 
       <p>test paragraph. This is used as placeholder<br />new line....</p> 
       <p>test paragraph. This is used as placeholder</p> 
       <p>test paragraph. This is used as placeholder<br />new line....</p> 
       <p>test paragraph. This is used as placeholder</p> 
       <p>test paragraph. This is used as placeholder<br />new line....</p> 
       <p>test paragraph. This is used as placeholder</p> 
       <p>test paragraph. This is used as placeholder<br />new line....</p> 
       <p>test paragraph. This is used as placeholder</p> 
       <p>test paragraph. This is used as placeholder<br />new line....</p> 
       <p>test paragraph. This is used as placeholder</p> 
       <p>test paragraph. This is used as placeholder<br />new line....</p> 
       <p>test paragraph. This is used as placeholder</p> 

      </div> 
      </div> 
     </div> 
    </div> 
    <div class="tr" style="background-color:Red;"> 
     <p>test paragraph. This is used as placeholder<br />new line.</p> 
    </div> 
</div> 
</div> 
</body>

此方法的概念是在外部容器的邊界下使用帶有三個css表格行的內部css表格。上面的css行用於承載頁眉，下面的一行承載頁腳。他們都根據他們的內容自動調整大小。

通過將高度設置爲100％來拉伸用作身體容器的中間行。關於「body」css行的內容，已經使用了外部相對/內部絕對佈局技術，以便強制內容適合「body」css行的邊界並允許溢出。爲了滿足拉伸的要求，IE需要中間的css表格單元格。

這個設計與FF + Chrome + Opera + Safari完美配合，但是IE拒絕計算「body」內容相對於其祖先，css表格行的高度，並且它仍然會將其與高度相關聯外部div。這正是我面臨的問題。

綜上所述，如果IE瀏覽器移動主體內容不存在問題，該解決方案可能對您有用。

來源

2013-08-31 19:23:17 jdimitr

使div與顯示：表具有100％的父div的高度

回答

相關問題