桌面高度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％未设置为父级高度

回答

相关问题