表不占用整个页面的高度

所以，我试图让一张桌子占用整个浏览器窗口的宽度和高度。表不占用整个页面的高度

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

这不起作用。目前，它适合窗口的宽度，但不是高度。我试过将表格高度设置为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

表不占用整个页面的高度

回答

相关问题