zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden div Container nimmt automatisch die Höhe des Eltern-div an

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.04.2006, 21:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.04.2006
Beiträge: 3
fidelio befindet sich auf einem aufstrebenden Ast
Standard div Container nimmt automatisch die Höhe des Eltern-div an

Hallöchen
ich probiere nun schon ewig rum, folgendes Layout mithilfe von div-Containern zu realisieren. Mein Ziel ist es, einen Banner mit fixer Höhe und 100% Breite über einem weiteren div-Container zu erhalten. Dieser weitere div-Container soll wiederum vier weitere Elemente beherbergen, die sich in der Höhe dem umfassenden div-Container anpassen sollen.
In etwa wie:

------------------------
####Banner#####
links/---Total----/rechts
-----/------------/-----
-----/------------/-----
-----/------------/-----
-----/------------/-----
-----/------------/-----
-----/#footer#-/-----
------------------------

Also der Banner sollte sich übers gesamte Browserfenster erstrecken. Der linke div-Container sollte "automatisch" die Höhe des übergeordneten Containers aufweise, so wie der rechte div-Container. Der Total-Container sollte schliesslich den Inhalt beherbergen.
Der footer-Container soll unterhalb des Inhalt-Containers zu liegen kommen und dieselbe Breite wie der Inhalts-Container aufweisen.
Ich probierte grundsätzlich in etwa wie folgt:

....
<body>
<div id="banner>
</div>
<div id="total">
<div id="links">
</div>
<div id="inhalt">
<div id="footer">
</div>
</div>
<div id="rechts">
</div>
</div>
....
Das stylesheet beherbergt nun folgende Definitionen:

body {margin: 0%;
padding: 0%;
border: 0px;
}
#total {position: absolute;
top: 110px;
left: 0px;
height: auto;
width: 100%;
margin: 0%;
padding: 0%;
}
#banner {position: absolute;
top: 0px;
left: 0px;
height: 110px;
width: 100%;
margin: 0%;
padding: 0%;
}
#links {position: absolute;
top: 0px;
left: 0px;
width: 10%;
height: inherit;
margin: 0%;
padding: 0%;
background-color: blue;
}
#rechts {position: absolute;
top: 0px;
right: 0px;
width: 10%;
height: inherit;
margin: 0%;
padding: 0%;
background-color: blue;
}
#footer {position: absolute;
bottom: 50px;
left: 0%;
width: 100%;
height: 50px;
margin: 0%;
padding: 0%;
background-color: blue;
}
#inhalt {position: absolute;
top: 0px;
left: 10%;
width: 80%;
height: auto;
margin: 0%;
padding: 0%;
}

Das Problem ist nun, dass die Höhe der div-Blöcke links und rechts mit den Eigenschaften inherit lediglich die Eigenschaft auto erben, nicht aber die tatsächliche Höhe des Elternelementes annehmen...
Ich weiss nicht, was ich noch probieren könnte.... mit relativen Positions-Angaben kommts in etwa gleich raus...
Weiss jemand Rat?..
Grüsse
fidelio
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.04.2006, 21:40
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Du willst also, dass die Container immer 100% Höhe haben?

Schau mal hier rein:

http://www.xhtmlforum.de/viewtopic.php?p=55252#55252

Für den footer benutze die Forensuche mit dem Begriff "footer stick alt" .
Wenn Du etwas fauler bist oder einfach nur zum Lernen, klick den Link in meiner Sig. ( da funktioniert 100% Höhe aber noch nicht besonders gut)

grüsse
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.04.2006, 23:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.04.2006
Beiträge: 3
fidelio befindet sich auf einem aufstrebenden Ast
Standard

Danke! Werd ich gerne ausprobieren! Ich frage mich bloss, weshalb dies so schwierig ist und weshalb dies mit css nicht einfacher machbar ist, schliesslich ist css doch genau für solche sachen da!?
Danke!!!
Mit Zitat antworten
  #4 (permalink)  
Alt 12.04.2006, 16:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.04.2006
Beiträge: 3
fidelio befindet sich auf einem aufstrebenden Ast
Standard

Ups! Wer hätte da gedacht, dass ich aufgrund dieses Problems soviel über css gelernt hab...
faux columns bauen also auf ineinander verschachtelten div-Containern auf, die mittels Hintergrundbild erreichen, dass Sie, unabhängig vom eigenen Inhalt, auf die Gesamthöhe des höchsten Kindselements gestreckt werden.... (Korrektur willkommen!) Hat mich eine rechte Weile gekostet, dies zu verstehen! Also nie wieder div-Container absolut oder irgendwie anders positionieren!... Bloss noch mittels float-Werten umfliessen lassen, mittes margin-Werten positionieren und mittels width-Werten dimensionieren (Korrekturen sehr willkommen!)...
Gemäss Zoe Gillenwater (http://www.communitymx.com/content/a...ge=3&cid=AFC58)
benötige ich hierfür jedoch noch die Klasse clearfix unter "Fixes" im css-stylesheet:
Code:
body {
	margin: 0;
	padding: 0;
	}

#wrapper1	{
	background: url(links_bg.png) repeat-y 15% 0;
	}
#wrapper2	{
	background: url(rechts_bg.png) repeat-y 85% 0;
	}
#wraprechts {
	float: right;
	width:85%;
	}
#banner {
	background: #fa882f
	}
#inhalt {
	float: left;
	width: 82%;
	}
#rechts {
	margin-left: 83%;
	}
#links {
	margin-right: 85%;
	}
#footer {
	background: #fa882f;
	}

/*	Fixes...
*/
.clearfix:after {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}
.clearfix {
  display: inline-block; 
}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/*	Ende Fixes
*/
... damit die div-Elemente "links" und "rechts" in folgendem html-Text angezeigt werden:
Code:
	<body>
		<div id="wrapper1" class="clearfix">
			<div id="wrapper2" class="clearfix">
				<div id="banner">Banner</div>
				<div id="wraprechts">	
					<div id="inhalt">Inhalt </div>
					<div id="rechts">Rechts</div>
				</div>
				<div id="links">Links</div>
			</div>
		<div id="footer">Footer</div>
		</div>
	</body>
Kann mir jemand kurz erläutern, was diese "Fixes" genau machen?...
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
div container automatische höhe Kohler CSS 1 29.06.2011 23:18
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
DIV höhe an Eltern DIV auto anpassen tabtwo CSS 18 18.07.2008 15:26
Höhe des div an Bildhöhe anpassen bernd_h_schulz CSS 5 03.04.2007 14:06
DIV: Höhe soll sich automatisch anderen DIV anpassen OnTheRun CSS 8 25.09.2006 19:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:03 Uhr.