使表格填满整个窗口

Question

使表格填满整个窗口

21

如何使HTML表格水平和垂直填满整个浏览器窗口？

网页只包含标题和一个分数，应该完全填满整个窗口。（我意识到固定字体大小是另一个问题。）

<table style="width: 100%; height: 100%;">
    <tr style="height: 25%; font-size: 180px;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%; font-size: 540px;">
        <td>100.00%</td>
    </tr>
</table>

当我使用以上代码时，表格的宽度是正确的，但高度会缩小以适应两行文本。我可能需要使用Internet Explorer 8或9来展示此页面。

- Hand-E-Food

6个回答

12

你可以在http://jsfiddle.net/CBQCA/1/上查看解决方案。

或者

<table style="height:100%;width:100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;border:1px solid">
     <tr style="height: 25%;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%;">
        <td>100.00%</td>
    </tr>
</table>

我去掉了字体大小，以显示列是展开的。我添加了border:1px solid只是为了确保表格已经展开。你可以把它删除。

- Raab

2

这个对我来说很好用：

<style type="text/css">
#table {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100%;
 width: 100%;
}
</style>

对我来说，仅仅将高度和宽度改为100％并不够，设置左、右、上、下为0也不够，但同时使用它们将起到作用。

- ColorCodin

1

以下这行代码帮助我解决了一个表格滚动条的问题，该问题是在页面上出现了尴尬的两个滚动条。将下面的样式应用于表格后，问题得到了很好的解决。
<table Style="position: absolute; height: 100%; width: 100%";/>

- Vishwas S L

0

尝试使用

<html style="height: 100%;">
    <body style="height: 100%;">
        <table style="height: 100%;">
        ...

为了强制所有 table 元素的父元素扩展到可用的垂直空间（这将消除使用 absolute 定位的需要）。

在 Firefox 28、IE 11 和 Chromium 34 中有效（因此很可能也适用于 Google Chrome）。

Source: http://www.dailycoding.com/posts/howtoset100tableheightinhtml.aspx

- Janaka Bandara

0

这是因为，当然，实际上没有页面高度。请记住，您在垂直方向上滚动页面内容而不是水平方向，从而创建有限的宽度但无限的高度。所选答案所做的是使表格占据可见区域并始终保持在那里（绝对定位）。因此，理论上，您试图做的是不可能的。

- DanjahSoft Programmer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Todd Baur · Accepted Answer

您可以像这样使用position属性将元素拉伸到父容器中。

<table style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
    <tr style="height: 25%; font-size: 180px;">
        <td>Region</td>
    </tr>
    <tr style="height: 75%; font-size: 540px;">
        <td>100.00%</td>
    </tr>
</table>