zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Seitenaufbau mit DIVs und 100% Höhe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.08.2004, 15:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.08.2004
Beiträge: 3
vespasquire befindet sich auf einem aufstrebenden Ast
Standard Seitenaufbau mit DIVs und 100% Höhe

Guten Tach zusammen!

Folgende Ausgangslage:

- XHTML 1.0 Strict
- Seitenaufbau mit DIVs per CSS-Formatierung
- DIV Header: als Kopfzeile für Logo
- DIV Text: für späteren Seiteninhalt
- DIV Links / Rechts: Rahmen um den Seiteninhalt mit Schattierung
- DIV Footer: als Fußzeile
- DIV Content: Als Haupt-DIV aller Inhalte (Höhe 100%)

Problematik:
Das gewünschte Erscheinungsbild wird gestört wenn der Inhalt des TEXT-DIVs großer als das Browserfenster wird. Ein Scrollbalken wird eingeblendet (für das gesamte Fenster), unterhalb des sichtbaren Fensterbreichs verlieren die DIVs ihre Formatierung.

Scheinbar wird die Höhenangabe von 100% auf den sichtbaren Fensterbereich und nicht auf den relativen Seiteninhalt bezogen?! Wie kann ich die Problematik umgehen/beheben?

------ BEISPIEL ------
http://www.rollerhof-bremen.de/de/test.php

Besten Dank für Lösungsvorschläge.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.08.2004, 15:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard Re: Seitenaufbau mit DIVs und 100% Höhe

Zitat:
Zitat von vespasquire
Scheinbar wird die Höhenangabe von 100% auf den sichtbaren Fensterbereich und nicht auf den relativen Seiteninhalt bezogen?!
Genauso ist es!

Gib einfach für vernünftige Browser ein min-height: 100% an und nur für den IE ein height:100%;

z.B. so:
#content {
min-height:100%;
}

* html #content {
height:100%;}

Das letzte wird nur vom IE interpretiert, der allerdings zieht den Container auch weiter, weil der Divs eher wie Tabellen behandelt.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.09.2004, 00:38
Neuer Benutzer
neuer user
 
Registriert seit: 29.08.2004
Beiträge: 4
Tunichtgut befindet sich auf einem aufstrebenden Ast
Standard Zwei DIV's

Heloooo

@terrikay: Danke für den Tipp, er hat auch mir sehr weitergeholfen.

Leider stehe ich nun aber weiter an: Was ist, wenn ich zwei DIV's mit 100% Höhe will und das eine nicht mit genügen Inhalt fülle?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>css-Test</title>
		<style type="text/css">
html, body{
	height:100%; 
	padding:0px; 
	margin:0px; 
	border:0px; 
}

#menu
{
	position:absolute;
	top:0px;
	left:0px;
	width: 200px;
	min-height:100%;
	background-color:blue;
}

* html #menu
{
	height:100%;
}

#content
{
	position:absolute;
	top:0px;
	left:200px;
	width: 500px;
	min-height:100%;
	background-color:green;
}

* html #content
{
	height:100%;
}

</style>

	</head>

	<body>
		<div id="menu">Menu</div>
		<div id="content">Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content  Content Content Content Content Content Content  Content Content Content Content Content Content  Content Content Content Content Content Content  Content Content Content Content Content Content  Content Content Content Content Content Content  Content Content Content Content Content Content  Content Content Content Content Content Content  Content Content Content Content Content Content Content  Content Content Content Content Content Content </div>
	</body>

</html>
Das blau DIV sollte das Menu darstellen und neben dem Inhalt auch bis ans Ende der Seite reichen.

Gibt es hier eine Lösung?

Danke im Voraus
Tunichtgut
Mit Zitat antworten
  #4 (permalink)  
Alt 02.09.2004, 09:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Mit diesem Beispiel müßte es gehen

http://www.xhtmlforum.de/viewtopic.php?t=1770
__________________
</ulle>
Mit Zitat antworten
  #5 (permalink)  
Alt 10.09.2004, 00:17
Neuer Benutzer
neuer user
 
Registriert seit: 29.08.2004
Beiträge: 4
Tunichtgut befindet sich auf einem aufstrebenden Ast
Standard

Heloooo

Endlich habe ich wieder Zeit gefunden, es weiter zu Probieren.

Zitat:
Mit diesem Beispiel müßte es gehen

Pfeil http://www.xhtmlforum.de/viewtopic.php?t=1770
@ulle: Leider habe ich dort nichts gefunden, was mir geholfen hat
Gibt es sonst noch etwas? Ich stehe völlig an und bin mir scho fast am überlegen, ob ich nicht wieder auf html umsteigen soll

Gruss
Tunichtgut
Mit Zitat antworten
  #6 (permalink)  
Alt 10.09.2004, 11:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Was ist, wenn ich zwei DIV's mit 100% Höhe will und das eine nicht mit genügen Inhalt fülle?
Was meinst Du mit dem Inhalt, der ist für die Höhe nicht relevant, zuviel Inhalt könnte ein Problem werden, aber das ist mit [overflow] zu lösen.

Wie 2 Container nebeneinander zu setzen sind siehst DU im oberen LINK.

height: 100%, siehst Du hier http://www.xhtmlforum.de/viewtopic.php?t=1498
__________________
</ulle>
Mit Zitat antworten
  #7 (permalink)  
Alt 12.09.2004, 16:21
Neuer Benutzer
neuer user
 
Registriert seit: 29.08.2004
Beiträge: 4
Tunichtgut befindet sich auf einem aufstrebenden Ast
Standard

Helooo
Zitat:
Was meinst Du mit dem Inhalt, der ist für die Höhe nicht relevant
In meinem Beispiel weiter oben ist das rechte grüne DIV mit Inhalt gefüllt. Wenn dieser Inhalt nicht grösser als das Browserfenster ist, dann erstreckt sich das DIV aber dennoch über das ganze Browserfenster. Das will ich auch so.

Nun ist das Problem, wenn der Inhalt mehr als ein Browserfenster füllt, dann ist das rechte blaue DIV (Menu) nur gerade 100 % hoh und wenn ich nach unten scrolle ist es auf einmal fertig. Ich möchte nun einfach, dass das Menu-DIV wie das Inhalts-DIV bis ans Ende der Seite reicht.

Gruss
Tunichtgut
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Divs mit Float auf unterschiedliche Höhe bringen Diablo1611 CSS 5 09.04.2013 21:22
100% Höhe von Divs klappt einfach nicht. icecold CSS 10 24.09.2010 11:25
3 DIVs - dynamische Höhe fire90de CSS 2 02.06.2009 14:39
div hat keine Höhe, wenn innere divs gefloatet werden? Anotherone CSS 3 23.07.2006 02:25
divs aneinander in der höhe ausrichten - wie ? MS Master CSS 1 24.02.2005 17:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:34 Uhr.