如何在“display：table-row”元素中嵌入元素“display：table”以填充MSIE10中的剩余高度？

虽然做了一些标记，但我发现，MSIE10实际上并不“理解”我想要解释的内容。这里是一个再现：如何在“display：table-row”元素中嵌入元素“display：table”以填充MSIE10中的剩余高度？

<!DOCTYPE html> 
<html> 
<head> 
<style> 
* 
    { 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; 
    } 

html, 
body 
    { 
     display: block; 

     height: 100%; 
     width: 100%; 

     margin: 0px; 
     padding: 0px; 
    } 

body 
    { 
     background: #eee; 

     display: table; 
    } 

body > div.header 
    { 
     background: #aaa; 

     display: table-row; 

     height: 92px; 
    } 

body > div.header > div.layout 
    { 
     background: #666; 

     display: table; 

     height: inherit; 
     width: 100%; 
    } 

body > div.main 
    { 
     background: #aaa; 

     display: table-row; 

     height: 100%; 
    } 

body > div.main > div.layout 
    { 
     background: #666; 

     display: table; 

     height: 100%; 
     width: 100%; 
    } 

body > div.main > div.layout > div 
    { 
     display: table-cell; 
    } 

div.menu 
    { 
     background: #fff; 
     width: 280px; 
    } 

div.content 
    { 
     background: #fff; 
    } 
</style> 
</head> 
<body> 
<div class="header"> 
    <div class="layout"></div> 
</div> 
<div class="main"> 
    <div class="layout"> 
     <div class="menu"> 
     x 
     </div> 
     <div class="content"> 
     y 
     </div> 
    </div> 
</div> 
</body> 
</html>

我试图强迫身体的div.main > div.layout填充剩下的高度，这在Chrome，FF，Opera和Safari浏览器甚至工作。不过MSIE忽略了我的任何尝试。我尝试过使用height: inherit，但它也没有效果。另一种选择是使用display: block并使子元素div.menu和div.content拥有display: inline-block; height: inherit，但它也失败了：我无法（或只是不知道如何）使div.content正确填充剩余宽度。

所以这里是问题：我该怎么做？

问候。

来源

2014-04-05 BlitZ

也许你可以看到它的另一种方式，你的头似乎有一个已知的高度。让我们专注于它。

你的问题是，没有通过CSS的colspan选项。相反，我们可以使用表格行的高度在该空间上放置一个负值或甚至高度的容器。

让我们尝试用您的标题： http://codepen.io/anon/pen/eLAGI/

HTML（如果你喜欢用DIV取代HTML5 elemnt）

<header> 
    <div> header </div> 
</header> 
<main> 
    <aside> 
    aside 
    </aside> 
    <article> 
    article 
    </article> 
</main>

而且CSS尝试。

body { 
    display:table; 
} 
header{ 
    background:green; 
    height:92px; 
} 
header > div { 
    position:absolute; 
    left:0; 
    width:100%; 
    background:inherit; 
    height:inherit; 
} 
main { 
    display:table-row; 
} 
/* sizing and cells*/ 
html, body { 
    height:100%; 
    width:100%; 
    margin:0; 
} 
aside { 
    width:200px; 
    display:table-cell; 
} 
main { 
    height:100%; 
    background:gray; 
} 
article { 
    background:yellow; 
    display:table-cell; 
}

你的头不会从它的内容调整，它需要在CSS是第一个孩子可以继承使用设定的值。

来源

2014-04-05 08:45:21

你可以在这里下载测试文件：http://codepen.io/anon/share/zip/eLAGI/（html和css单独的文件夹） –

如何在“display：table-row”元素中嵌入元素“display：table”以填充MSIE10中的剩余高度？

回答

相关问题