rest der seitenhöhe

#1 (**permalink**) 10.07.2003, 10:37

hallo,

gibt es eine möglichkeit, einem <div> den rest der zur verfügung stehenden seitenhöhe zu geben?

wenn ich z.b. einen <div> habe, der top: 0px hat und height: 100px und dann darunter einen weiteren <div> positionieren möchte der flexibel den rest der seitenhöhe ausfüllt. ist das möglich?

vielen dank für tpis.

zed

ulle · #2 (**permalink**) 10.07.2003, 11:04

Welchen Rest der Seitenhöhe ?

Meinst Du eine Seite die sich dem Browserfenster anpasst oder einen Container der genauso hoch wird wie ein Seitenelement das die Höhe bestimmt.

#3 (**permalink**) 10.07.2003, 12:10

hallo ulle,

ich meine einen container, der solange er keinen oder nur wenig inhalt hat den rest der seitenhöhe einnimmt. der rest ist halt flexibel, je nach größe des browserfensters.

zed

#4 (**permalink**) 10.07.2003, 13:21

top:100px; bottom:0px;

in browsern die CSS können funktioniert das wunderbar!

#5 (**permalink**) 10.07.2003, 13:50

nein, das funktioniert leider nicht. was auch eigentlich logisch ist, denn bei top:100px und bottom:0px spannt sich der <div> quasi von unten nach oben auf. ergebnis: man sieht nichts davon.

getestet in ie 6 und mozilla 1.3

ulle · #6 (**permalink**) 10.07.2003, 14:01

Doch sieht

man schon !!!

Nur ist diese Veranstaltung BUGy

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="de"> 
<head><title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 


<style type="text/css">		<!-- 
		html,body { background-color: #FFFFFF;
			margin: 0px; 
			padding: 0px; 			
		} 

		#oben {
			height: 100px;
			background-color: #FF9933;
		}		 
		#unten { 
			position: absolute;
			top:101px; 
			bottom:0px;
			left: 0px;
			right: 0px;	  
			background-color: #3399FF;
			margin: 3px;
			border: 1px solid #000000;
			padding: 5px;
		}	
		--> 
</style> 
</head> 

<body> 

<div id="oben">oben</div>
<div id="unten">unten</div>

</body></html>

Mozilla und Opera erlauben sogar dass die 4 Ecken des Elements angegeben werden und ziehen das Element dem entsprechend auf. Was aber wenn der Inhalt größer ist ?? Dann wird es lustig......

Der IE kann es gar nicht

Verstehe sowieso die Übung nicht. Entweder ich habe eine Site die sich relativ dem Fenster anpasst und pos. darin meine Elemente entsprechend relativ oder ich habe eine horizontal fliessende Site, d.h. so lang wie nötig.

#7 (**permalink**) 10.07.2003, 15:05

danke erstmal für die antworten.

es geht darum, einen festen bereich oben und einen flexiblen bereich darunter zu haben. wenn man das browserfenster in der höhe verkleinert, soll sich nur der untere bereich anpassen. aber auch nur solange der inhalt nicht mehr platz verlangt. ist das der fall, soll gescrollt werden.

zed.

#8 (**permalink**) 10.07.2003, 16:25

Ich habe den Eintrag direkt nach dir geschrieben ...

Ich hab ne Seite die auch mit eine Art Container aufgebaut ist.
Nur sind das keine DIV-Container sondern Tabellen. Nur
leider kann ich dem Browser weder mitteilen, dass er die
Tabelle eine bestimmte Anzahl an Prozent hoch machen soll,
nur wenn ich sie absolut mache geht es?!

Und die darunter liegende Tabelle wollte ich FLEXIBEL
GROSS machen. D.h. Sie soll sich immer dem restlichen
freien Platz anpassen! Das habe ich mit heigth:auto;
probiert aber das funktioniert auch nicht. Hatte gedacht
es sei wie der befehl in <table heigth="*">.

Gruss MAZE

#9 (**permalink**) 11.07.2003, 08:12

Der IE kann es gar nicht

hatte ich doch oben schon gesagt, funktioniert in allen Browsern die CSS können

ulle · #10 (**permalink**) 11.07.2003, 09:24

Zitat:

Zitat von MAZE

Nur
leider kann ich dem Browser weder mitteilen, dass er die
Tabelle eine bestimmte Anzahl an Prozent hoch machen soll,
nur wenn ich sie absolut mache geht es?!

Logisch -> prozentuale Höhenangaben sind immer relativ zum Elternelement. Nur muß der Browser dazu wissen wie Hoch das Elternelement ist.

Also benötigen wir zumindest eine Höhenangabe im BODY

Da sich laut BOX-MODEL die Angaben padding, margin, border zur Höhe bzw. Breite addieren müssen wir es verhindern das ein Browser seine eigenen Defaults zu den 100% dazu zählt; sonst >100% = Müll

Code:

	body	{
		margin: 0px;
		padding: 0px;
		height: 100%;
	}

Nun stellt sich die Frage warum das nicht bei der Breite nötig wird.

Ganz einfach weil HTML schon immer als relativ "breites Protokol" konzipiert ist [FLIESSTEXT !!]

Somit ist ein Block-Element, zum Beispiel ein DIV, immer so Breit wie Verfügbar (~ 100%).

Ihr könnt dem DIV ja mal width:100% und margin: 5px geben. Und Voila schon habt Ihr einen SCROLL-BALKEN.

Somit wird auch Klar warum die Eingangs-Frage ein Problem ist

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Layout Problem, Header/Footer 100%, bei dynamischer Seitenhöhe	keinplan	CSS	3	21.07.2011 19:36
element an footer 'festbinden' bei dynamischer seitenhöhe	keinplan	CSS	2	12.08.2010 01:49
Zum 100. Mal - Layout gesamte Seitenhöhe einnehmen lassen	Voodoo	CSS	6	17.04.2006 01:52
Div mit fester breite und Rest = 100%	Mr.Right	CSS	27	20.10.2005 16:56
Höhe(n) in % und px, Rest bis 100%	twelve	CSS	6	17.03.2005 17:17