桌面高度100％未設置爲父級高度

我在表格單元格內有一個表格。子表格高度必須與父元素高度對齊。我將height="100%"設置爲子表，但不起作用。桌面高度100％未設置爲父級高度

CSS

.outer{ 
    border:1px solid black; 
    border-collapse:collapse; 
} 
.inner{ 
    border:1px solid red; 
    height:100%; 
    width:auto; 
}

HTML

<table class="outer"> 
    <tr> 
    <td> 
     <!-- Content Here --> 
    </td> 
    <td> 
     <table class="inner"> 
     <tr> 
      <td> 
      <!-- Content Here --> 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table>

來源

2013-02-27 Rama Rao M

分配一些寬度與母體TD與內表。說width="100"。還添加以下CSS：

爲外類添加position : relative;

爲內類添加position:absolute; bottom:0; right:0; top:0;

也顯示添加：塊屬性來內類

來源

2013-02-27 11:23:40 Aratidgr8

它適用於IE，但不適用於其他瀏覽器 – 2013-02-27 11:30:33

添加：display：block; .inner類可以在所有瀏覽器中使用。 – Aratidgr8 2013-02-27 11:52:02

不..它不工作。 – 2013-02-27 11:54:40

瀏覽器並不計算表格單元的高度。至少沒有好的跨瀏覽器CSS解決方案。父TD的相對和絕對定位將導致表崩潰。解決方案可能是設置固定的像素高度或使用JavaScript計算offsetHeight。 Set style =「height：100％;」將TD和id =「inner」添加到子表中。運行在頁面加載以下JavaScript：

<!DOCTYPE HTML PUBLIC> 
<html> 
<head> 
<style> 
    .outer{ 
    border:1px solid black; 
    border-collapse:collapse; 
    } 
    .inner{ 
    border:1px solid red; 
    height:100%; 
    width:auto; 
    } 
</style> 

</head> 
<body> 

    <table class="outer"> 
    <tr> 
    <td> asdf alsdf asldf<br/>asdf alsdf asldf<br/> asdf alsdf asldf<br/> 
     asdf alsdf asldf<br/>asdf alsdf asldf<br/> 
    </td> 
    <td style="height:100%;"> 
    <table class="inner" id="inner"> 
     <tr><td>inner content</td></tr> 
    </table> 
    </td> 
    </tr> 
    </table> 
    <script type="text/javascript"> 
    var el = document.getElementById('inner'); 
    el.style.height = el.parentNode.offsetHeight + 'px'; 
    </script> 
</body> 
</html>

您也可以綁定這如果需要在onResize事件窗口。

來源

2013-08-10 06:29:26 nico

我的解決方案是給內表的固定高度爲1px，並將內表中td的高度設置爲100％。盡一切可能，它工作正常，在IE，Chrome和FF測試！

來源

2014-10-19 17:42:10

奇數，但它的工作。 – Reigel 2017-07-12 07:11:42

桌面高度100％未設置爲父級高度

回答

相關問題