HTML - 製作表格最小高度匹配當前屏幕高度

我使用表設計一個網頁，佈局看起來如下：HTML - 製作表格最小高度匹配當前屏幕高度

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <table> 
 
     <tr><td></td></tr> 
 
     <tr><td></td></tr> 
 
     <tr><td></td></tr> 
 
     </table> 
 
    </body> 
 
    </html>

我需要我的表最低高度匹配屏幕高度，即當內容高度小於屏幕高度時，應通過在中間行添加空格來匹配屏幕高度。

實現此目的最簡單的方法是什麼？

來源

2015-08-30 ammcom

它不使用表，更好的辦法是使用div元素來設計頁面的好方法。看看[bootstrap]（http://getbootstrap.com/css/#grid）網格系統，它是創建佈局的更合適的方式。 – Vasyl

我知道這是最好的使用div，但表使用，我必須使用最小的修改 – ammcom

不要使用佈局<table>元素。實際上，CSS3 flexbox規範是爲您的佈局需求創建的 - 訣竅是在父元素上使用display flex，並使用flex-grow: 1確保允許您填充最小高度的行增長。家長的最低身高應爲100vh。

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
div.content-wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
} 
 
div.row-2 { 
 
    background-color: #333; 
 
    color: #eee; 
 
    flex-grow: 1; 
 
}

<div class="content-wrapper"> 
 
    <div class="row-1">Row 1</div> 
 
    <div class="row-2">Row 2</div> 
 
    <div class="row-3">Row 3</div> 
 
</div>

來源

2015-08-30 16:45:41 Terry

它通過設置表格的最小高度運行良好，還有一件事情仍然接受答案：完整的多餘空間：我需要爲中間的行添加額外的空間，謝謝 – ammcom

@ammcom我急於誤解你的問題 - 現在更新了我的答案。我的建議是*不*使用'

'元素進行佈局，並使用CSS3 flexbox來幫助您實現所需的佈局。查看更新的演示。 – Terry

我知道使用div更好，但實際上當前的佈局使用表和設置最小高度爲100vh爲整個表工作，我可以重新設計使用您的解決方案的頁面，如果沒有其他事情要做，但作爲第一個建議設置表格的最小高度是最好的，如果我可以添加一些樣式到行，以便限制它們的高度增長。 – ammcom

這是一種做法。您可以爲第一行和最後一行中的表格單元格指定高度，然後中間一行將填充剩餘空間。

您需要爲表格指定一個高度，100vh。這比使用100％更好（它需要設置身體和html元素的高度，這並不總是適用於所有瀏覽器）。

請注意，當您指定表格的高度時，高度值將被視爲最小值。瀏覽器將根據需要擴展表格的高度，以確保顯示所有內容。

在下面的示例中，您可以在較小的顯示窗口上看到滾動效果。如果您以完整頁面模式查看演示，則內容的定位不包含垂直滾動條。

html, body { 
 
    margin: 0; 
 
} 
 
table { 
 
    width: 100%; 
 
    height: 100vh; 
 
    border: 1px dotted blue; 
 
} 
 
td { 
 
    border: 1px dotted blue; 
 
} 
 
.r1 td, .r3 td { 
 
    height: 50px; 
 
} 
 
.r2 td { 
 
    vertical-align: top; 
 
}

<table> 
 
    <tr class="r1"> 
 
    <td>Header</td> 
 
    </tr> 
 
    <tr class="r2"> 
 
    <td>Content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus sapien erat, ac hendrerit quam euismod vitae. Morbi sed dolor in quam consequat hendrerit condimentum fringilla arcu. Nulla mollis, neque non tincidunt auctor, libero ex viverra felis, a tempor purus leo eget justo. Aenean mattis est tincidunt ante tincidunt, quis aliquam neque bibendum. Sed id mauris non ligula malesuada porta in nec velit. Aliquam a erat elementum, dapibus dui sed, pulvinar mauris. Duis egestas luctus turpis non feugiat. Mauris sit amet ornare quam. Nunc rutrum orci lacus, vel commodo arcu convallis sed. Donec et urna tellus. Integer pulvinar ante at urna molestie, sit amet euismod turpis venenatis. Etiam congue quis mi in pretium. Aenean commodo ante et odio ultricies, sed sodales nisi tincidunt. Sed convallis tincidunt aliquam. Duis congue magna id congue tincidunt.</td> 
 
    </tr> 
 
    <tr class="r3"> 
 
    <td>Footer</td> 
 
    </tr> 
 
</table>

來源

2015-08-30 16:42:04

我試過了，但它似乎不工作，我設置HTML和身體的高度爲100％，設置表的高度到100％，並設置一個固定的高度除了中間的行以外的行，沒有運氣 – ammcom

你使用什麼瀏覽器？ –

相關問題

HTML - 製作表格最小高度匹配當前屏幕高度

回答

相關問題