[CSS] dynamische höhe von divs

me · 04.04.2006, 20:28

Hallo,
ich hab grad son kleines Layout Problem mit divs.
Hier mal der seeehhhhr stark vereinfachte code:

Code:

<html>
<head>
<title>Layout</title>
<style type="text/css">

div {
	border: 1px solid #000;
}

#oben {
	height: 100px;
}

#unten {
	/*???*/
}

</style>
</head>
<body>

<div id="oben">Oberer Bereich der Website</div>
<div id="unten">Unterer Bereich</div>

</body>
</html>

der untere div soll den Rest der Seite füllen. aber wie mach ich das?

thx

danysahne333 · 04.04.2006, 21:54

entweder

Code:

#unten { 
  height: 100%; 
}

oder

Code:

#unten { 
  height: auto; 
}

oder meintest du das anders?

me · 05.04.2006, 14:22

leider nicht...
hast du das mal bei dir ausprobiert?
bei 100% nimmt der div die höhe vom gesamte darstellungsbereich an und erzeugt somit einen vertikalen scrollbar und bei auto passier gar nichts

danysahne333 · 05.04.2006, 14:41

erkär doch einfach mal was du überhaupt vorhast?

lass doch die seite sich automatisch erweitern, jeh nachdem wieviel content da ist, oder nutze feste px angaben falls du ein festes design hast

me · 05.04.2006, 14:49

eigentlich gibts da nichts zu erklären da schon alles gesagt ist. ich will einfach aus design-technischen gründen das der unterer div bis nach unten geht (wegen background und so

).
und feste px angaben kann ich nicht verwanden da bei jedem nutzer der darstellungsbereich ne andere grösse hat.

PsychoEagle · 05.04.2006, 15:57

nehm doch nen BG für die ganze Seite und nen BG (=hintergrund) für deinen oberen Div. Dann brauchst du kein unteren Div mehr

Zergling-new · 05.04.2006, 17:15

Sowat?

PHP-Code:

  <html>

<body>

 
<div style="background:blue;height:100%">

    <div style="background:green;height:200px">

        Navigation

    </div>

    <div>

        Content

    </div>

</div>

 
</body>

</html>

oder sowat?

PHP-Code:

  <html>

<body>

 
<div style="position:absolute;height:100%;width:100%;background:blue;margin-top:200px;z-index:1">

    Content

</div>

 
<div style="position:absolute;height:200px;width:100%;background:red;z-index:2">

    Navigation

</div>

 
</body>

</html>

me · 06.04.2006, 12:06

@PsychoEagle: so einfach ist das leider nicht, da es nicht nur um den hintergrund geht, sondern auch um "border-right: 1px dashed #000;" der bis zu "boden" quasi gehen soll aber danke

@Zergling: beim 2ten ist das wieder so, dass der untere div die höhe des gesamten darstellungsbereichs annimmt und damit einen vscrollbar erzeugt da auch noch die höhe des oberen divs dazugerechnet wird...
und beim ersten ist das so wie schon PsychoEagle vorgeschlagen hat.

aber mal ne andere herangehensweise: ist es möglich die höhe des darstellungsbereichs mittels php auszulesen und dem unteren div so die höhe abzüglich der oberen divs in pixeln zuzuweisen?

Zergling-new · 06.04.2006, 12:36

Nö, könntest es aber mittels JS an PHP übergeben.
Würd ich aber lassen...
Notfalls <table>s benutzen. Das wichtigste ist letztlich dass deine Seite so aussieht wie sie soll. Validität ist auch wichtig, aber nur sekundär.

me · 06.04.2006, 13:11

ok, schade...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[CSS] - DIVs automatisch nach unten verlängern	freitz	HTML, Usability und Barrierefreiheit	10	29.11.2011 18:30
DIVs nebeneinander?	wers1	HTML, Usability und Barrierefreiheit	13	18.07.2008 14:26
[JS] Divs nach Datum sortieren	cycap	JavaScript, Ajax und mehr	24	16.07.2008 18:48
2 Div's zentrieren	pfump	HTML, Usability und Barrierefreiheit	7	24.04.2008 10:57
[CSS] Darstellungsproblem von DIVs	Sirke	HTML, Usability und Barrierefreiheit	1	25.01.2008 23:00
Formular mit DIVs	Aris Sung	HTML, Usability und Barrierefreiheit	2	25.11.2007 14:09
Dynamisches Container-Div für floating Divs	HStev	HTML, Usability und Barrierefreiheit	1	14.09.2007 12:39
DIV's untereinander -> Problem	snatch-ic	HTML, Usability und Barrierefreiheit	1	05.02.2007 12:39
Spaltendesign mit DIVs	HStev	HTML, Usability und Barrierefreiheit	4	12.06.2006 12:29
3 divs nebeneinander mit dynamisch gleicher Höhe		HTML, Usability und Barrierefreiheit	19	18.01.2006 22:05
[CSS] "position:fixed;" bei divs funktioniert nich		HTML, Usability und Barrierefreiheit	1	07.01.2006 01:22
Abstände 2er Divs voneinander.	'progman'	HTML, Usability und Barrierefreiheit	8	29.07.2005 11:42
DIVs nebeneinander	freitz	HTML, Usability und Barrierefreiheit	4	21.04.2005 22:47
[Erledigt] drei divs nebeneinander		HTML, Usability und Barrierefreiheit	5	10.01.2005 20:27
Verschachtelung von DIV's bei unterschiedlichen Auflösungen		HTML, Usability und Barrierefreiheit	8	24.12.2004 14:45

04.04.2006, 20:28
me Benutzer Registriert seit: 24.08.2004 Beiträge: 86	[CSS] dynamische höhe von divs Hallo, ich hab grad son kleines Layout Problem mit divs. Hier mal der seeehhhhr stark vereinfachte code: Code: <html> <head> <title>Layout</title> <style type="text/css"> div { border: 1px solid #000; } #oben { height: 100px; } #unten { /???/ } </style> </head> <body> <div id="oben">Oberer Bereich der Website</div> <div id="unten">Unterer Bereich</div> </body> </html> der untere div soll den Rest der Seite füllen. aber wie mach ich das? thx __________________ enotiz der ultimative Online-Notizzettel


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

04.04.2006, 21:54
danysahne333 Erfahrener Benutzer Registriert seit: 16.02.2006 Beiträge: 158	entweder Code: #unten { height: 100%; } oder Code: #unten { height: auto; } oder meintest du das anders?

05.04.2006, 14:22
me Benutzer Registriert seit: 24.08.2004 Beiträge: 86	leider nicht... hast du das mal bei dir ausprobiert? bei 100% nimmt der div die höhe vom gesamte darstellungsbereich an und erzeugt somit einen vertikalen scrollbar und bei auto passier gar nichts __________________ enotiz der ultimative Online-Notizzettel

05.04.2006, 14:41
danysahne333 Erfahrener Benutzer Registriert seit: 16.02.2006 Beiträge: 158	erkär doch einfach mal was du überhaupt vorhast? lass doch die seite sich automatisch erweitern, jeh nachdem wieviel content da ist, oder nutze feste px angaben falls du ein festes design hast

05.04.2006, 14:49
me Benutzer Registriert seit: 24.08.2004 Beiträge: 86	eigentlich gibts da nichts zu erklären da schon alles gesagt ist. ich will einfach aus design-technischen gründen das der unterer div bis nach unten geht (wegen background und so ). und feste px angaben kann ich nicht verwanden da bei jedem nutzer der darstellungsbereich ne andere grösse hat. __________________ enotiz der ultimative Online-Notizzettel

05.04.2006, 15:57
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	nehm doch nen BG für die ganze Seite und nen BG (=hintergrund) für deinen oberen Div. Dann brauchst du kein unteren Div mehr __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)

05.04.2006, 17:15
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Sowat? PHP-Code: `<html> <body> <div style="background:blue;height:100%"> <div style="background:green;height:200px"> Navigation </div> <div> Content </div> </div> </body> </html>` oder sowat? PHP-Code: `<html> <body> <div style="position:absolute;height:100%;width:100%;background:blue;margin-top:200px;z-index:1"> Content </div> <div style="position:absolute;height:200px;width:100%;background:red;z-index:2"> Navigation </div> </body> </html>`

06.04.2006, 12:06
me Benutzer Registriert seit: 24.08.2004 Beiträge: 86	@PsychoEagle: so einfach ist das leider nicht, da es nicht nur um den hintergrund geht, sondern auch um "border-right: 1px dashed #000;" der bis zu "boden" quasi gehen soll aber danke @Zergling: beim 2ten ist das wieder so, dass der untere div die höhe des gesamten darstellungsbereichs annimmt und damit einen vscrollbar erzeugt da auch noch die höhe des oberen divs dazugerechnet wird... und beim ersten ist das so wie schon PsychoEagle vorgeschlagen hat. aber mal ne andere herangehensweise: ist es möglich die höhe des darstellungsbereichs mittels php auszulesen und dem unteren div so die höhe abzüglich der oberen divs in pixeln zuzuweisen? __________________ enotiz der ultimative Online-Notizzettel

06.04.2006, 12:36
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Nö, könntest es aber mittels JS an PHP übergeben. Würd ich aber lassen... Notfalls <table>s benutzen. Das wichtigste ist letztlich dass deine Seite so aussieht wie sie soll. Validität ist auch wichtig, aber nur sekundär.

06.04.2006, 13:11
me Benutzer Registriert seit: 24.08.2004 Beiträge: 86	ok, schade... __________________ enotiz der ultimative Online-Notizzettel