Resthöhe

Jackels · #1 (**permalink**) 06.06.2005, 14:55

Hi.
Ich sitze nun schon eine ganze Zeit an einem div-Problem.
Folgendes soll realisiert werden:
___________________
| Kopf mit 100% Breite|
-----------------------------
| Navi | Inhalt Inhalt |
| Navi | Inhalt Inhalt |
| Navi | Inhalt Inhalt |
| Navi | Inhalt Inhalt |
----------------------------
Jetzt geht es darum, dass der Kopf eine feste Höhe (z.B. 60px) haben soll und Navi und Inhalt die Resthöhe des Browserfensters einnehmen sollen.
Height:auto greift ja nicht, da die divs Navi und Inhalt dann zu kurz sind.
Ich such jetzt eine bessere Lösung, als so lange zu probieren bis ich die Resthöhe in % raus hab.
Wer kann helfen?
Danke schon mal im Voraus.

hannes-n · #2 (**permalink**) 06.06.2005, 14:58

so weit ich weiß, geht das mit css nicht!

kannst evtl den navi/content bereich 100% hoch machen, und den header per position:absolute drüber legen ..

//edit
die resthöhe ist doch nie gleich, auch nicht in %. oder wie oder was?

beeviz · #3 (**permalink**) 06.06.2005, 16:11

probier mal mit negativem margin rum.
also du gibst dem body n margin-top: 60px; und dem header dann margin-top: -60px;

mazzo · #4 (**permalink**) 06.06.2005, 16:21

oder nutz die Forumsuche... Das Thema ist wirklich häufig dran.

hannes-n · #5 (**permalink**) 06.06.2005, 16:25

sowas geht? ich bin doch immer wieder positiv überrascht was für möglichkeiten css eröffnet um dinge zu machen, die man so eigentlich nicht machen sollte

mazzo · #6 (**permalink**) 06.06.2005, 16:34

Zitat:

Zitat von hannes-n

sowas geht? ich bin doch immer wieder positiv überrascht was für möglichkeiten css eröffnet um dinge zu machen, die man so eigentlich nicht machen sollte

ich glaube, die Suche ist eher ein in PHP programmierter Algorithmus angewendet auf der Forums-Datenbank, kein CSS

hannes-n · #7 (**permalink**) 06.06.2005, 17:40

ich hab nicht damit gerechnet, dass mir jmd "dazwischen" pfuscht :P

toscho · #8 (**permalink**) 07.06.2005, 01:52

Ich habe mal eine kleine Anleitung zu diesem Thema geschrieben, die du dir leicht anpassen kannst: (toten Link entfernt).
Statt des Rahmens, den ich verwendet habe, setzt du einfach deine Kopfzeile.

Jackels · #9 (**permalink**) 07.06.2005, 10:16

Das mit deinem Rahmen funktioniert ganz gut. Das einzige Manko ist jetzt, dass ich ja keine Beschriftung im Kopf mehr anbringen kann, oder?

ulle · #10 (**permalink**) 07.06.2005, 16:15

100% + Rest || Angelehnt an der Lösung von Toscho !!

Hier eine XHTML 1.0 Lösung, bin mir nicht sicher ob es in allen Browsern funktioniert. Verbesserung erwünscht !!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxxx</title>
 
<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/ 

*			{
			margin:  0;
			padding: 0;
			
			/* Tabellen
			 */
			border-collapse:collapse;
			border-spacing: 0;
			}


html[xmlns]	{
			/* permanent Scrollbalken Gecko
			 * => overflow: -moz-scrollbars-vertical;
			 *
			 * html[xmlns]			:: CSS2.1				 
			 * html[xmlns^="http"] 	:: CSS3
			 *
			 * Viewport komplette Hoehe (100%);
			 * Rundung ab 3. Nachkomma nur Gecko (?)
			 * padding-bottom : 0.005em;
			 */
             height : 100%;
             padding-bottom : 0.005em;
			}

		
html,
body		{
			color:		#000000;
			background:	#FFDD22;
			
			/* line-height ohne Einheit - sonst Vererbung
			 */
			line-height: 1.45;
			}

body		{			
			/* Nur hier, sonst gibt es
			 * eventuell Vererbungsprobleme.
			 */
			font-size:   100.01%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			
			min-width: 45em;
			}




/* obiges CSS ulle-Prolog;
* 100% + "Rest" feste Hoehe
*/
		
html,
body		{
			height: 100%;
			}


body		{
			/* position: absolute;
			 * verhindert scrollbar im IE
			 */
			position: absolute;
			top: -40px;
			
			margin: 19px;
			border: 1px solid #000000;
		
			background-color: #FFFFFF;
			}
			
html>body	{
			/* alle außer =< IE6
			 */
			position: relative;
			
			height: auto;
			min-height: 100%;			
			}

div#fix		{
			position: relative;
			height: 10em;
			
			/* wegen [ BODY ]
			 * margin-top(19px) + border-top(1px) = 20px
			 */ 
			margin-top: 20px;
			border-bottom: 1px solid #000000;			
			}
			
div#fix div	{
			/* somit ist es moeglich
			 * die border des BODY zu verdecken;
			 */
			position: absolute;
			
			height: 100%;
			width: 100%;
			
			left: -1px;

			background-color: #FFBB00;
			padding: 0 1px 0 1px;
			}

			
/*]]>*/ 
</style> 

</head> 
<body> 

<div id="fix"><div>Dieser Bereich ist immer 10em hoch</div></div>




	Dieser Bereich ist immer 100% hoch minus unterer/oberer Rahmen
	und unterer Außenabstand und  minus 10em von oben
</p>

<div style="height: 30em; background-color: #0099FF;">Test-Inhalt | verstellbare Höhe</div>

</body> 
</html>

<edit>
Tipp-Fehler im CODE / HTML-Tag

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
Box soll die Resthöhe immer ausfüllen - Wie geht das?	frimipiso	CSS	3	05.03.2012 00:23
Div Höhe an Bildschirm Resthöhe anpassen	amiroo	CSS	3	10.03.2010 19:08
Footer soll Resthöhe vom Browser einnehmen	Safran	CSS	1	23.06.2006 14:55