使表填满整个窗口

How can I make a HTML table fill the entire browser window horizontally and vertically?

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

The page is simply a title and a score which should fill the entire window. (I realise the fixed font sizes are a separate issue.)

该页面只是一个标题和一个应该填满整个窗口的分数。 (我意识到固定的字体大小是一个单独的问题。)

<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>

When I use the above code, the table width is correct, but the height shrinks to fit the two rows of text.

当我使用上面的代码时,表格宽度是正确的,但高度会缩小以适合两行文本。

I'm likely to be forced to use Internet Explorer 8 or 9 to present this page.

我很可能*使用Internet Explorer 8或9来呈现此页面。

6 个解决方案

#1

You can use position like this to stretch an element across the parent container.

您可以使用这样的位置来拉伸父容器中的元素。

<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>

#2

you can see the solution on http://jsfiddle.net/CBQCA/1/

你可以在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>

I removed the font size, to show that columns are expanded. I added border:1px solid just to make sure table is expanded. you can remove it.

我删除了字体大小,以显示列已展开。我添加了border:1px solid只是为了确保扩展表。你可以删除它。

#3

Below line helped me to fix the issue of scroll bar for a table; the issue was awkward 2 scroll bars in a page. Below style when applied to table worked fine for me.
<table Style="position: absolute; height: 100%; width: 100%";/>

下面的行帮助我解决了表格的滚动条问题;问题是页面中的两个滚动条很尴尬。应用于表格下面的样式对我来说很好。

#4

Try using

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

in order to force all parents of the table element to expand over the available vertical space (which will eliminate the need to use absolute positioning).

为了强制表元素的所有父元素扩展可用的垂直空间(这将消除使用绝对定位的需要)。

Works in Firefox 28, IE 11 and Chromium 34 (and hence probably Google Chrome as well)

适用于Firefox 28,IE 11和Chromium 34(因此也可能是Google Chrome)

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

#5

This works fine for me:

这对我来说很好:

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

For me, just changing Height and Width to 100% doesn’t do it for me, and neither do setting left, right, top and bottom to 0, but using them both together will do the trick.

对我来说,只是将高度和宽度更改为100%并不适合我,也不会将left,right,top和bottom设置为0,但将它们放在一起将会起到作用。

#6

That is because, of course, there is no ACTUAL page height. Keep in mind that you scroll throughout the contents of a page vertically not horizontally, creating a limited width but unlimited height. What the selected answer did was to make the table take up the visible area and stay there no matter what(absolute positioning).So theoretically what you were trying to do was impossible ????????

那是因为,当然,没有ACTUAL页面高度。请记住,您在页面内容中垂直而非水平滚动,创建有限宽度但无限高度。所选答案的作用是让桌子占据可见区域并留在那里,无论什么(绝对定位)。从理论上讲,你试图做的事情是不可能的????????

#1