如何在「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中的剩餘高度？

回答

相關問題