Tabelle soll bis auf den Boden des Bildschirm reichen

Status
Nicht offen für weitere Antworten.

Wet-Blanket

Mitglied
Moin,

nachdem ich mir erst einmal über einen Titel der Frage den Kopf zerbrochen habe, kommt hier die Frage:

###########################
Kurzbeschreibung:

Problem:
1) Tabelle mit zwei Spalten
2) linke Spalte Rand (Hintergrundbild mit repeat-Befehl (Background-Repeat:repeat-y))
3) rechte Spalte Inhalt (variabler Inhalt in Sachen Menge)
4) Inhalt beeinflusst somit die Größe/Höhe der ganzen Tabelle
5) Befehl gesucht, welcher ein Objekt an den Boden der Seite (des Bildschirms (unabhängig von der Auflösung)) setzt sodass somit die Tabelle die ganze Seite füllt)
6) Problem: Oberhalb der Tabelle befinden sich noch mehrere andere Objekte, womit der Befehl 100% nicht funktioniert, da die Objekte oberhalb immer 100px hoch sind

###########################


1) Ich habe ein Tabelle, welche je nach Inhalt verschieden hoch ist.
2) Die Tabelle besitzt zwei Spalten. In der linken ist ein Bild, welches als Rand fungiert und mit einem repeat Befehl die linke Spalte vertikal ausfüllt und sich wiederholt.
3) In der rechten Spalte ist der Inhalt der variiert.
4) Bei einem kleinen Inhalt ist die Tabelle sehr klein und hört somit weit über dem Boden des Bildschirms (der Seite) auf. Demnach hört auch der Rand in der Mitte der Seite auf. Jener soll allerdings bis auf den Boden der Seite laufen und den Teil links von der ganzen Tabelle von der Gleichen trennen.
5) Gedacht war, ein Element in die Rand-Spalte zu integrieren, welches sich automatisch am Boden der Seite befindet und somit die Tabelle den gesammten Bildschirm vertikal ausfüllt und der Rand bis auf den Boden der Seite läuft. Bisher habe ich es nicht hinbekommen.

HTML:
<div style="position:absolut; bottom:0px;">&nbsp;</div>

Jender Befehl tut zwar das leere Element (Leerzeichen) auf den Boden der Seite, doch die Tabelle hört an der Stelle auf, an der ich den Befehl gesetzt habe, und das ist logischerweise weiter oben. Das Objekt wird also quasi nur verschoben. Der Befehl (Zeichen im Quelltext) bildet allerdings weiterhin das Ende der Tabelle. Das Objekt liegt also außerhalb der Tabelle.

6) Als Problem liegt noch vor, dass oberhalb der Tabelle noch eine weitere Tabelle mit festen Objekten liegt. Jene haben eine feste Höhe von 100px. Somit fällt der Befehl 100% für die Tabelle weg, da die Tabelle dann über den Boden der Seite hinaus ragt. Da die Bilder mit 100px bei jeder Auflösung eine andere prozentuale Höhe haben, kann man also nicht klar sagen, wieviel Prozent die untere Tabelle hoch ist.
----
So, wer durchgestiegen ist und eine Antwort auf meine Frage, bzw. eine Lösung für mein Problem hat, dem wäre ich sehr sehr dankbar, denn ich bin so langsam am Ende mit meinem Latein.

Vielen Dank im Voraus.

Mit freundlichen Grüßen

Wet-Blanket
 
ich weiss nicht ob es die beste Lösung ist, aber mit einer Verschachtelung von Tabellen kommst du auch ans Ziel...:


HTML:
 <table style="width:100%; height:100%" ..>
 <tr>
  <td valign="top">
   <table style="width: 100%; height: 100px;" ..>
	...
   </table>
  </td>
 </tr>
 <tr> 
  <td style="width: 100%; height: 100%;" valign="top">
   ...
  </td>
 </tr>
 <tr>
  <td valign="bottom">
   ...
  </td>
 </tr>
</table>

hoffe konnte helfen,
mameluck
 
Moin,

ich hatte einen Geistesblitz und die Sache hat sich erledigt.
Ich habe folgendes gemacht:

Ich habe eine neue Tabelle geschrieben, welche 100% hoch ist und in zwei Teile geteilt ist. Der obere Teil ist leer. Im unteren Teil befindet sich die gleiche Spalte mit dem Hintergrundbild, wie in der Problemtabelle. Jene Tabelle habe ich nun so verschoben, dass sie über der Problemtabelle liegt und den aufhörenden Strich einfach verlängert.

HTML:
<div style="position:absolute; top:0px; left:164px; width:15px; height:100%;">
<table cellpadding="0" cellspacing="0" border="0" width="15" height="100%">
	<tr height="20%">
		<td valign="bottom"></td>
	</tr>
	<tr height="80%">
		<td style="background-image:url(http://www.aircraft-archiv.de/images/border_left.gif); background-repeat:repeat-y;" valign="top">
		</td>
	</tr>
</table>
</div>

Zum Anschauen, gibt es noch mal die Vorher-Nachher Versionen als Bilder:

archiv_1.jpg

archiv_2.jpg


Aber trotzdem danke für die Hilfe ;)

MFG
Wet-Blanket
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück