div-Aufteilung, die ich einfach nicht hinkriege

Faebe · 24.12.2006, 08:28

Hallo zusammen

Ich möchte ein Layout mit drei div-Bereichen und CSS-Formatierung erstellen, komm aber irgendwie nicht dahinter. Die Aufteilung sollte folgender massen sein.

Die drei bereiche sollen übereinander platziert werden und die gesamte Screenbreite ausfüllen.

Der oberste Bereich ist direkt am oberen Screenrand fixiert und hat eine feste angegebene Höhe.

Der unterste Bereich soll am unteren Screenrand fixiert sein und hat ebenfalls eine feste angegebene Höhe.

Dazwischen platziert sich der mittlere Bereich, welcher natürlich von der Höhe her flexibel sein muss, damit aich das ganze Konstrukt an verschiedene Bildschirmgrössen anpassen kann. Dieser Bereich soll ausserdem um einen Scrollbalken erweitert werden, wenn der Inhalt überläuft.

Hat da jemand eine Idee?

-------------------------- Oberkante Screen --------------------------------
<div id=1> (feste Höhe)
--------------------------------------------------------------------------------

<div id=2> (flexible Höhe)

--------------------------------------------------------------------------------
<div id=3> (feste Höhe)
-------------------------- Unterkante Screen -------------------------------

DER_Brain · 24.12.2006, 09:47

Hi..

Hier wäre mal der Code für so ne art von Seitenaufbau...
Ich hab einfach mal mit % und absoluten angaben rumgespielt..

Müsste eigentlich so passen, allerdings gäbe es evt. auch ne einfachere Art und Weise (z.B. das Spiel mit margin ...)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <title>testpage</title>
  </head>
  <body style="background-color:#ccc;margin:0;padding:0;height:101%;">
  <div style="background-color:#000;margin-top:0;height:10%;width:100%;position:absolute;top:0;"></div>  

  <div style="background-color:#ff0;height:80%;position:absolute;top:10%;overflow:auto; width:100%;">


TEST</p>

TEST</p>

TEST</p>

TEST</p>


TEST</p>

TEST</p>

TEST</p>

TEST</p>


TEST</p>

TEST</p>

TEST</p>

TEST</p>


TEST</p>

TEST</p>

TEST</p>

TEST</p>


TEST</p>

TEST</p>

TEST</p>

TEST</p>


TEST</p>

TEST</p>

TEST</p>

TEST</p>


TEST</p>

TEST</p>

TEST</p>

TEST</p>


TEST</p>

TEST</p>

TEST</p>

TEST</p>


TEST</p>

TEST</p>

TEST</p>

TEST</p>


TEST</p>

TEST</p>

TEST</p>

TEST</p>


TEST</p>

TEST</p>

TEST</p>

TEST</p>


TEST</p>

TEST</p>

TEST</p>

TEST</p>


TEST</p>

TEST</p>

TEST</p>

TEST</p>


TEST</p>

TEST</p>

TEST</p>

TEST</p>


TEST</p>

TEST</p>

TEST</p>

TEST</p>
</div>

  <div style="background-color:#fff;height:10%;width:100%;position:absolute;bottom:0;"></div>
  </body>
</html>

mfg
Andi

wurtzel · 24.12.2006, 13:22

Ich glaub für dieses Problem hilft nur ein Javascript was dir die größe des mittleren divs berechnet

nikosch · 28.12.2006, 15:15

javascript ist dafür eher ungeeignet. hier ist eine geschickte kombination von wert-vorgaben und auto gefragt.

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
SWiki, weil einfach einfach einfach ist.	b++	Beitragsarchiv	0	06.10.2007 19:07
UPDATE funkt einfach nicht ...	Nosferatu	PHP Tipps 2006	11	05.03.2006 00:16
code zwischen [php] & [/php] bleibt einfach aus.BB-Code	aircrash	PHP Tipps 2006	6	01.03.2006 19:54
Tabellen aufteilung ... und ich bekomme es einfach nicht hin	fmueller	PHP-Fortgeschrittene	5	06.02.2006 13:37
problem mit bilddarstellung. bild einfach zusammenschneiden?	Promaetheus	PHP Tipps 2007	14	07.12.2005 00:23
Suche einfach zu includendes login-skript		Beitragsarchiv	3	18.11.2005 15:28
Einfach Datepicker gesucht	Cyberbob_at_tot	PHP Tipps 2007	5	14.11.2005 09:10
wörter werden bei zeilenumbruch einfach gesplittet		HTML, Usability und Barrierefreiheit	7	02.11.2005 14:11
MySQL Join: Ich komme einfach nicht dahinter...	pino	Datenbanken	6	26.09.2005 23:20
[Erledigt] Cron bricht ohne Fehler einfach ab		PHP-Fortgeschrittene	5	08.09.2005 18:06
Suche spezielles aber glaub einfach geschriebenes script		Beitragsarchiv	2	15.08.2005 15:52
socket_set_blocking() will einfach nicht		PHP Tipps 2005-2	4	13.08.2005 12:14
apache 2 - gehts einfach!		Server, Hosting und Workstations	5	22.10.2004 00:23
komm nicht weiter, für profi einfach g	Rotti	PHP Tipps 2004	4	07.09.2004 18:04
Einfach Suchfunktion in PHP		PHP Tipps 2004	0	11.06.2004 11:45

24.12.2006, 08:28
Faebe Benutzer Registriert seit: 06.01.2004 Beiträge: 57	div-Aufteilung, die ich einfach nicht hinkriege Hallo zusammen Ich möchte ein Layout mit drei div-Bereichen und CSS-Formatierung erstellen, komm aber irgendwie nicht dahinter. Die Aufteilung sollte folgender massen sein. Die drei bereiche sollen übereinander platziert werden und die gesamte Screenbreite ausfüllen. Der oberste Bereich ist direkt am oberen Screenrand fixiert und hat eine feste angegebene Höhe. Der unterste Bereich soll am unteren Screenrand fixiert sein und hat ebenfalls eine feste angegebene Höhe. Dazwischen platziert sich der mittlere Bereich, welcher natürlich von der Höhe her flexibel sein muss, damit aich das ganze Konstrukt an verschiedene Bildschirmgrössen anpassen kann. Dieser Bereich soll ausserdem um einen Scrollbalken erweitert werden, wenn der Inhalt überläuft. Hat da jemand eine Idee? -------------------------- Oberkante Screen -------------------------------- <div id=1> (feste Höhe) -------------------------------------------------------------------------------- <div id=2> (flexible Höhe) -------------------------------------------------------------------------------- <div id=3> (feste Höhe) -------------------------- Unterkante Screen -------------------------------


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

24.12.2006, 13:22
wurtzel Erfahrener Benutzer Registriert seit: 29.08.2003 Beiträge: 216	Ich glaub für dieses Problem hilft nur ein Javascript was dir die größe des mittleren divs berechnet __________________ Das Problem ist der Anfang einer Lösung

28.12.2006, 15:15
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.256 PHP-Kenntnisse: Fortgeschritten	javascript ist dafür eher ungeeignet. hier ist eine geschickte kombination von wert-vorgaben und auto gefragt.