[Erledigt] drei DIVs mit absoluten und %-Höhen untereinander

Tensin · 20.09.2009, 00:04

Hallo, ich möchte drei DIVs erstellen die den kompletten Bildschirm ausfüllen.
Das obere und das untere DIV sind dabei 50px hoch und das mittlere soll den Rest dazwischen auffüllen:

PHP-Code:

  <div id="container">

<div style="width:100%;height:50px;"></div>

<div style="width:100%;height:100%;"></div>

<div style="width:100%;height:50px;"></div>

</div>

Leider ist das Ergebnis, dass der Bildschirm zu 100% + 2x50px gefüllt ist. Es ist also rechts eine Scrollbar zu sehen und das untere DIV ist zu tief. Gibt es da ein Lösung ohne JavaScript?

lemontree · 20.09.2009, 10:11

Aloha!

Also ich versteh die frage grad nicht ganz du möchtest das kein scrollbalken kommt ? , und der inhalt immer genau das Browserfenster ausfüllt ?

Ich glaube dasgeht so nicht weil du ja nie weißt wie groß der Website Besucher das Browserfenster hat.

Baltasar · 20.09.2009, 11:10

"position:absolute" dürfte was für dich sein -> www.css4you.de

Tensin · 20.09.2009, 20:28

Danke, hab's hinbekommen, vielleicht hat ja jemand ein ähnliches Problem, daher hier die Lösung:

PHP-Code:

  <div id="container">

<div style="width:100%;height:50px;"></div>

<div style="position:absolute;top:50px;bottom:50px;width:100%;max-height:100%;"></div>

<div style="position:absolute;bottom:0px;width:100%;height:50px;"></div>

</div>

nikosch · 22.09.2009, 02:09

In meinen Augen unlogisch. Vor allem sollte man das mal mit verschiedenen Inhalten testen.

Tensin · 23.09.2009, 01:21

Warum unlogisch? Bei mir läuft's bisher wunderbar, aber wenn du mir sagen kannst wie's logisch funktioniert, dann her damit.

nikosch · 23.09.2009, 01:49

Kannst ja mal das im IE6 ausprobieren:

Code:

<div id="container">
<div style="width:99%;height:50px;">LOL</div>
<div style="position:absolute;top:50px;bottom:50px;width:99%;max-height:100%;overflow:auto;">Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br></div>
<div style="position:absolute;bottom:0px;width:99%;height:50px;">wa</div>
</div>

Habe mal überlangen Inhalt und ein overflow hinzugefügt. Dan siehst Du das Dilemma.
Viel getestet kannst Du noch nicht haben. Am eigenartigsten finde ich das max-height:100%; .. Aber auch die gleichzeitige Angabe von top und bottom funktioniert imho nicht.

Tensin · 23.09.2009, 17:54

Danke, warum nicht gleich so!

Das mit dem Overflow wird bei mir nicht passieren, da meine Inhalte nicht über den Rand schießen werden, darauf achte ich. Allerdings kann man diese Lösung dann nicht verallgemeinern, da gebe ich dir recht. Aber solange keine 'logische' Lösung vorhanden ist, verwende ich diese Formatierung.

Und Tschüss!

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
DIVs untereinander ohne Zwischenraum Problem im FF und Opera	litterauspirna	HTML, Usability und Barrierefreiheit	3	10.02.2009 14:15
ausrichtung von divs in divs geht nur im IE	litterauspirna	HTML, Usability und Barrierefreiheit	5	14.10.2008 14:58
[Erledigt] DIvs passen sich nicht automatisch der höhe an im Firefox und Opera	litterauspirna	HTML, Usability und Barrierefreiheit	4	09.10.2008 13:08
[Erledigt] Divs nebeneinander richtig positionieren das sie nicht verschoben werden	litterauspirna	HTML, Usability und Barrierefreiheit	12	09.10.2008 09:04
[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
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
DIV's positionieren	scooter	HTML, Usability und Barrierefreiheit	10	12.01.2006 16:11
DIVs auf "echte" 100% der Seite setzen?	King2k	HTML, Usability und Barrierefreiheit	3	07.12.2005 15:15
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

20.09.2009, 00:04
Tensin Neuer Benutzer Registriert seit: 09.08.2009 Beiträge: 25 PHP-Kenntnisse: Anfänger	[Erledigt] drei DIVs mit absoluten und %-Höhen untereinander Hallo, ich möchte drei DIVs erstellen die den kompletten Bildschirm ausfüllen. Das obere und das untere DIV sind dabei 50px hoch und das mittlere soll den Rest dazwischen auffüllen: PHP-Code: `<div id="container"> <div style="width:100%;height:50px;"></div> <div style="width:100%;height:100%;"></div> <div style="width:100%;height:50px;"></div> </div>` Leider ist das Ergebnis, dass der Bildschirm zu 100% + 2x50px gefüllt ist. Es ist also rechts eine Scrollbar zu sehen und das untere DIV ist zu tief. Gibt es da ein Lösung ohne JavaScript?


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

20.09.2009, 10:11
lemontree Neuer Benutzer Registriert seit: 08.07.2009 Beiträge: 9 PHP-Kenntnisse: Fortgeschritten	Aloha! Also ich versteh die frage grad nicht ganz du möchtest das kein scrollbalken kommt ? , und der inhalt immer genau das Browserfenster ausfüllt ? Ich glaube dasgeht so nicht weil du ja nie weißt wie groß der Website Besucher das Browserfenster hat.

20.09.2009, 11:10
Baltasar Erfahrener Benutzer Registriert seit: 26.10.2003 Beiträge: 592	"position:absolute" dürfte was für dich sein -> www.css4you.de

20.09.2009, 20:28
Tensin Neuer Benutzer Registriert seit: 09.08.2009 Beiträge: 25 PHP-Kenntnisse: Anfänger	Danke, hab's hinbekommen, vielleicht hat ja jemand ein ähnliches Problem, daher hier die Lösung: PHP-Code: `<div id="container"> <div style="width:100%;height:50px;"></div> <div style="position:absolute;top:50px;bottom:50px;width:100%;max-height:100%;"></div> <div style="position:absolute;bottom:0px;width:100%;height:50px;"></div> </div>`

22.09.2009, 02:09
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	In meinen Augen unlogisch. Vor allem sollte man das mal mit verschiedenen Inhalten testen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

23.09.2009, 01:21
Tensin Neuer Benutzer Registriert seit: 09.08.2009 Beiträge: 25 PHP-Kenntnisse: Anfänger	Warum unlogisch? Bei mir läuft's bisher wunderbar, aber wenn du mir sagen kannst wie's logisch funktioniert, dann her damit.

23.09.2009, 01:49
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Kannst ja mal das im IE6 ausprobieren: Code: <div id="container"> <div style="width:99%;height:50px;">LOL</div> <div style="position:absolute;top:50px;bottom:50px;width:99%;max-height:100%;overflow:auto;">Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br>Be<br></div> <div style="position:absolute;bottom:0px;width:99%;height:50px;">wa</div> </div> Habe mal überlangen Inhalt und ein overflow hinzugefügt. Dan siehst Du das Dilemma. Viel getestet kannst Du noch nicht haben. Am eigenartigsten finde ich das max-height:100%; .. Aber auch die gleichzeitige Angabe von top und bottom funktioniert imho nicht. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (23.09.2009 um 01:52 Uhr).

23.09.2009, 17:54
Tensin Neuer Benutzer Registriert seit: 09.08.2009 Beiträge: 25 PHP-Kenntnisse: Anfänger	Danke, warum nicht gleich so! Das mit dem Overflow wird bei mir nicht passieren, da meine Inhalte nicht über den Rand schießen werden, darauf achte ich. Allerdings kann man diese Lösung dann nicht verallgemeinern, da gebe ich dir recht. Aber solange keine 'logische' Lösung vorhanden ist, verwende ich diese Formatierung. Und Tschüss!