it-swarm.com.de

Machen Sie eine Tabelle, die das gesamte Fenster ausfüllt

Wie kann ich eine HTML-Tabelle dazu bringen, das gesamte Browserfenster horizontal und vertikal auszufüllen?

Die Seite ist einfach ein Titel und eine Partitur, die das gesamte Fenster ausfüllen soll. (Ich weiß, dass die festen Schriftgrößen ein separates Problem sind.)

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

Wenn ich den obigen Code verwende, ist die Tabellenbreite korrekt, aber die Höhe wird verkleinert, sodass die beiden Textzeilen passen.

Ich bin wahrscheinlich gezwungen, Internet Explorer 8 oder 9 zu verwenden, um diese Seite zu präsentieren.

15
Hand-E-Food

Sie können diese Position verwenden, um ein Element über den übergeordneten Container zu strecken.

<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>
17
Todd Baur

sie können die Lösung auf http://jsfiddle.net/CBQCA/1/ sehen.

ODER 

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

Ich habe die Schriftgröße entfernt, um anzuzeigen, dass die Spalten erweitert sind .. __ Ich fügte border:1px solid hinzu, um sicherzustellen, dass die Tabelle erweitert wird. Sie können es entfernen.

9
Raab

Die folgende Zeile half mir, das Problem der Bildlaufleiste für eine Tabelle zu beheben. das Problem war umständlich 2 Bildlaufleisten auf einer Seite. Unter Stil, wenn auf Tisch angewendet, funktionierte gut für mich.
<table Style="position: absolute; height: 100%; width: 100%";/>

1
Vishwas S L

Versuchen Sie es mit

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

um alle Eltern des table-Elements zu zwingen, sich über den verfügbaren vertikalen Raum auszudehnen (wodurch die Verwendung von absolute-Positionierung entfällt).

Funktioniert in Firefox 28, IE 11 und Chromium 34 (und damit wahrscheinlich auch Google Chrome)

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

0
Janaka Bandara

Das liegt daran, dass es natürlich keine IST-Seitenhöhe gibt. Beachten Sie, dass Sie durch den Inhalt einer Seite vertikal und nicht horizontal scrollen, wodurch eine begrenzte Breite, jedoch eine unbegrenzte Höhe entsteht. Die ausgewählte Antwort bestand darin, dass der Tisch den sichtbaren Bereich einnimmt und dort bleibt, was auch immer (absolute Positionierung).

Das funktioniert gut für mich:

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

Für mich ist das Ändern von Height und Width auf 100% für mich nicht der Fall, und links, rechts, oben und unten werden nicht auf 0 gesetzt, aber beide zusammen zu verwenden, ist der Trick.

0
ColorCodin