錶行沒有完全高度

我試圖創建一個頂欄並在其下一個分開佈置的佈局。我遇到的問題是width和height應該自動適應瀏覽器大小。錶行沒有完全高度

所以我有一張桌子試了一下：

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 500px; 
 
    min-width: 600px; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
} 
 
.topbar { 
 
    height: 50px; 
 
    position: relative; 
 
    background: grey; 
 
} 
 
.layout_table { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<body> 
 
    <table class="layout_table"> 
 
    <tr> 
 
     <td class="topbar"> 
 
     hallo 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <table width="100%"> 
 
     <td width="20%" style="background: blue;"> 
 

 
     </td> 
 
     <td width="80%" style="background: yellow;"> 
 

 
     </td> 
 
     </table> 
 
    </tr> 
 
    </table> 
 
</body>

JSFiddle

現在的結果是正確的大部分。問題是第一個表的第二行沒有完整的高度。

我該如何解決這個問題？

來源

2015-08-23 dsfsdf

'高度：100％'是你想不完全是：它只是意味着表的大小應計算其高度的100％，視口的不是100％高度。另外，請勿使用'

'進行佈局。有更好的方法來實現你想用現代CSS做什麼。 – Terry

我會建議使用別的比表格的佈局。表是相當老派。除非你正在做電子郵件通訊。看我做的簡單例子：https://jsfiddle.net/pgyq8nq9/ – Roope

「全高」是什麼意思？ – 5208760

回答

而不是使用佈局，這是不推薦爲元素<table>元素應只用於表格的內容，你應該嘗試用現代的替代品。你所要做的可以用的calc()和float或flex規格的組合來實現。該float屬性更好地老版本瀏覽器的支持，但flex（從CSS3 Flexbox的規範）提供了更多的可能性佈局。

在我的示例中，我已經使用了flexbox規範，以便（1）垂直對齊topcontent文本和（2）在它下面的藍色和黃色列之間分配空間。後者可以通過float輕鬆實現，但避免這種情況的原因是需要適當地清理漂浮物。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 500px; 
 
    min-width: 600px; 
 
} 
 
.topbar { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 50px; 
 
    background-color: grey; 
 
} 
 
.content { 
 
    display: flex; 
 
    height: calc(100vh - 50px); 
 
    min-height: 450px; /* minimum parent height minus topbar height */ 
 
} 
 
.content .c1 { 
 
    width: 20%; 
 
    height: 100%; 
 
    background-color: blue; 
 
} 
 
.content .c2 { 
 
    width: 80%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
}

<div class="topbar"> 
 
    <span>Hello</span> 
 
</div> 
 
<div class="content"> 
 
    <div class="c1"></div> 
 
    <div class="c2"></div> 
 
</div>

來源

2015-08-23 12:34:42 Terry

相關問題