表不佔用整個頁面的高度

所以，我試圖讓一張桌子佔用整個瀏覽器窗口的寬度和高度。表不佔用整個頁面的高度

我也希望表單元格的大小相等。

這不起作用。目前，它適合窗口的寬度，但不是高度。我試過將表格高度設置爲100％，但它不起作用（至少在Firefox中）。這是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

<link rel="stylesheet" type="text/css" href="example.css"/> 

<table> 
<tr> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td> 
</tr> 
<tr> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td> 
</tr> 
<tr> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td> 
</tr> 
<tr> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td> 
</tr> 
<tr> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td> 
</tr> 
<tr> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td> 
</tr> 

</table> 

</html>

這是CSS：

table{ 
    width:100%; 
    height:100%; 
    border:1; 
} 

tr{ 
    height:100%; 
    background-color:blue; 
}

來源

2013-12-09 idungotnosn

下面的html和body CSS都是正確的。小提琴會顯示它。不要只是設置正文，還要包含提及的html，以便整個文檔佔用視口高度。 – Daved

也正如我所說，你應該刪除tr的高度，以便正確工作。 – nick4fake

嘗試以下方法：

CSS

html,body{ 
    width: 100%; 
    height:100%; 


} 

table{ 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    position: absolute; 
    border:1; 
} 

tr{ 
    height:auto; 
    background-color:blue; 
}

來源

2013-12-09 18:26:03 mitch

這完美的作品。一旦事情超時，我會接受它。 – idungotnosn

嘗試也是這樣：

body, html { 
    height: 100%; 
    min-height: 100%; 
}

同時刪除TR {身高：100％}

演示：http://jsfiddle.net/Y73bT/2/

你也可以使用簡短的doctype：而不是那個。

來源

2013-12-09 18:23:59 nick4fake

感謝您的回覆。我試圖讓這個在Firefox中工作，所以我切割並粘貼到我的.css文件。結果是第一行被拉長，而下面的行很小。我需要所有的行都是相同的大小。讓我編輯我的問題來澄清這一點。 – idungotnosn

這很簡單：只需刪除tr高度 – nick4fake

更新後的答案和小提琴。 – nick4fake

你需要讓你的body和html也是窗口的100％：加入這個在CSS

html, body { 
    height:100%; 
}

演示http://jsfiddle.net/ASVpD/3/

爲了讓所有行等於移除height:100%表格tr

tr{ 
    /*height:100%;*/ Remove this 
    background-color:blue; 
}

來源

2013-12-09 18:24:21 DaniP

設置表中的位置，以絕對然後設置每個邊緣的位置：

table { width:100%; height:100%; position:absolute; top:0; right:0; bottom:0; left:0; }

來源

2013-12-09 18:24:50 oucil

表高度是相對於其父。將html和body設置爲高度：100％並從tr刪除高度：100％：

html { 
    height: 100%; 
} 
body { 
    height: 100%; 
} 
table{ 
    width:100%; 
    height:100%; 
    border:1; 
} 
tr{ 
    background-color:blue; 
}

來源

2013-12-09 18:27:47

表不佔用整個頁面的高度

回答

相關問題