div höhe - 2 scrollbalken vermeiden

grubentaucher · #1 (**permalink**) 29.03.2010, 11:42

Hallo zusammen,

ich habe bei der Erstellung unserer neuen Firmenseite ein Problem mit der Höhe.

Ich hätte es gerne so, dass der Header immer am oberen Fensterrand und der Footer immer am unteren Fensterrand klebt und der div content0 (der rahmen um content) bzw content (der Inhalt selbst), dementsprechend den Rest ausfüllt. Egal ob der User das Browserfenster in 1100*600 oder in Vollbild betrachtet.

Ich hoffe meine Erklärung ist halbwegs verständlich.

Noch zum besseren Verständnis wie ich mir das Layout gedacht habe, header, nav und footer sind immer sichtbar, nur in content0 bzw content wird bei entsprechend langem Inhalt ein Scrollbalken angezeigt. So wie ich es mir vorstelle ist der Scrollbalken dann auch wirklich nur neben dem langen Inhalt, nicht rechts am Fensterrand.

Wenn ich content eine feste Höhe gebe "height:665px und overflow:auto" setze, dann ist bei längerem Inhalt der Scrollbalken da wo ich ihn will. Allerdings habe ich dann bei Seiten mit viel Inhalt logischerweise 2 Scrollbalken wenn das Browserfenster kleiner als mein Layout mit fester Höhe gemacht wird. Einen am langen Inhalt selbst, und einen am Fensterrand.

Ich suche quasi eine Möglichkeit content zu sagen "guck wieviel platz zwischen header und footer ist, unanhängig davon wie groß das fenster ist und fülle diesen Platz aus".

Könnte mir jemand einen Tip geben wie ich meine Vorstellung am besten umsetzten kann, oder eine andere Idee wie ich diese Sache lösen kann?

Bin für jede Hilfe dankbar!

Hier ein Bild wie es sein soll:

Hier das Problem:

Hier die CSS:

Code:

	/* POSITIONEN FORM SCHRIFTART */

body
	{
		
		height: 100%;
		font: 85% arial, hevetica, sans-serif;
		text-align: center;
		color: #404040;
		background-color: #FFFFFF;
		
	}
	
#container
	{
		margin: 1em auto;
		width: 1024px;
		text-align: left;
		background-color: #FFFFFF;		
		
	}

#header
	{	
		margin: 0;
		height: 80px;
		width:1024px;
		background-color: #FFFFFF;
		border-top-width:3px;
  		border-top-style:solid;
  		border-top-color: #575757;
  		border-bottom-width:3px;
  		border-bottom-style:solid;
  		border-bottom-color: #575757;
  	}

	
#content0
	{
		float:right;
		margin-top:10px;
		margin-right: 3px;
		width: 832px;
		background-color: #EDEDED;
		border-left-width:3px;
  		border-left-style:solid;
		border-color:white;
		
	}



#content
	{
		margin:0;
		padding:1em 1.5em 2.5em 1.5em;
		height:665px;
		overflow: auto;
	}


		
	
#nav0	
	{
		margin-top: 10px;
		margin-left: 3px;
		width: 177px;
		height: 100%;
		
		
	}

#nav
	{
		padding:0.5em 1.5em 1em 1em;
		height:100%;
	}
	
#footer	
	{
		clear: both;
		height: 12px;
		background-color: #575757;
		border-top-width:6px;
  		border-top-style:solid;
  		border-color:white;
		white-space: pre;
	}



	/* FELD MIT RUNDEN ECKEN */


.back div 
	{ 
		background: url(pic/corner/nt.gif) repeat; 
	
	}

.tr div 
	{
		background:url(pic/corner/tr.gif) top right no-repeat;
	}

.tl div 
	{
		background:url(pic/corner/tl.gif) top left no-repeat;
	}

.br div 
	{
		background:url(pic/corner/br.gif) bottom right no-repeat;
	}

.bl div 
	{
		background:url(pic/corner/bl.gif) bottom left no-repeat;
	}


	/* SCHRIFT FARBE GROESSE */

		
#nav h1 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 120%; 
		color: #FF0000;
		padding: 0px;
	}		

#nav p 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 95%; 
		 
	}

#nav a.norm 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 95%;
		color: #404040;
		text-decoration: none;
	}

#nav a.norm:hover
	{
		text-decoration: underline;
		
	}


#nav a.rot
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 120%; 
		color: #FF0000;
		text-decoration: none;
		
	}

#nav a.rot:hover
	{ 
		text-decoration: underline;
		
	}
#content h1 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 150%; 
		margin-left: 5px;
		margin-right: 10px; 
	}
	
#content h2 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 100%;
		font-weight:bold;
		margin-left: 10px;
		margin-right: 10px; 
	}

#content p 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 100%; 
		margin-left: 10px; 
	}

#content a 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 100%;
		color: #404040; 
	}
	
#content u 
	{ 
		font: 85% arial, hevetica, sans-serif; 
		font-size: 100%;
		color: #404040; 
	}

#footer  
	{ 
		padding-top:1px;
		font: 85% arial, hevetica, sans-serif; 
		font-size: 65%;
		color:#FFFFFF; 	
		text-align: right; 
	}

und hier eine der html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
   http-equiv="content-type"> 
<title>TESTSEITE</title>

	<link rel="stylesheet" href="test.css" media="screen">
 
</head>


</head>
<body>
<div id="container">
<div id="header">
<img src="logo3.jpg" style="margin-left:10px;" alt="BILD">
</div>
<div id="leiste">
</div>


<div id="content0">

<div class="back"> 
 <div class="tr"> 
  <div class="tl">
   <div class="br"> 
    <div class="bl"> 
	
	 <div id="content">
<h1>Willkommen</h1>
<p>
Herzlich willkommen auf der Internetpr&auml;senz der...
</p>
<p>
Auf den folgenden Seiten erfahren Sie etwas mehr &uuml;ber 
<a href="unternehmen.html">unser Unternehmen</a>, 
unsere Leistungen, ...
</p>

</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="nav0">
<div class="back"> 
 <div class="tr"> 
  <div class="tl">
   <div class="br"> 
    <div class="bl"> 
<div id="nav">

<p><a class="rot" style="text-decoration: underline;" href="index2.html">Startseite</a></p>
 
<p><a class="rot" href="unternehmen.html">Unternehmen</a></p>

<p><a class="rot" href="leistungen.html">Leistungen</a></p>

<p><a class="rot" href="suche.html">Angebote</a></p>

<p><a class="rot" href="kontakt.html">Kontakt</a></p>


<br>
<p style="text-align: center; margin-left:1px; font-size: 80%;">
ADRESSE<br>
ADRESSE<br>
ADRESSE<br>
ADRESSE
</p>          
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="footer">Copyright © 2010 
</div>
</div>

</body>
</html>

hubspe · #2 (**permalink**) 29.03.2010, 15:27

Hi,

schau mal hier bei den Fixed Layouts..

grubentaucher · #3 (**permalink**) 29.03.2010, 15:33

Dankeschön.
Sieht, zumindest auf den ersten Blick, nach genau dem aus, wonach ich gesucht habe.

Grüße!

Walter IT-Services · #4 (**permalink**) 30.03.2010, 16:16

Warum machst du so etwas?
Ich persönlich empfinde so etwas als störend,
dass wenn ich nur 768px Höhe zur Verfügung habe,
erstmal knapp 300px mit Header und Footer verbraten werden.

Der Gedanke dahinter ist immer nett gemeint,
versaut mir aber die Sicht :/

Da bevorzuge ich lieber einen Scrollbalken über die ganze Seite.

grubentaucher · #5 (**permalink**) 07.04.2010, 11:16

Danke Michael, ich habe mir Deinen Rat zu Herzen genommen und die Seite mal auf meinem Netbook aufgerufen (Auflösung 1024 * 600) und stimmt schon, das Layout sieht gut aus auf einem Monitor mit hoher Auflösung, aber es war auf dem Netbook eine qual.

Grüße

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
DIV: Ausfüllen restlicher Höhe bei weiterem DIV mit fixer Höhe	danoman	CSS	5	24.04.2011 18:38
div, dynamische höhe aber nix faux ...	emmis	CSS	1	11.12.2010 17:37
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18
joomla template entschlüsseln	nieselfriem	CSS	2	18.03.2008 13:12