Hallo!

Ich habe die Hoehe von der Navigation und auch des Inhalts auf 100% Hoehe angepsst, damit es auch wenn weniger Text ist, die ganze Seite ausfuellt.

Allerdings ist nun die Seite groesser als 100% und geht unter der Adressleiste unten noch weiter.
Ich hab mal den body mit bgcolor schwarz, dadurch wird ersichtlich, dass es nicht an den anderen div-Elementen liegt.
Aber mehr leider auch nicht.

Hat jemand eine Ahnung, warum das sein koennte, dass die Seite mehr als 100% hat?

Vielleicht hab ich einen Denkfehler, hab sonst immer tables verwendet. Hab schon versucht diverse Hoehenangaben wegzugeben oder zu veraendern, aber es bezieht sich leider nie auf das ganze

Hilfe waere sehr willkommen!

Hi,

das liegt einfach daran, dass du die inneren DIVs #navi, #inhalt und #vier absolut positionierst, der jeweilige top / bottom-Wert ist hierbei größer als null, und ihnen zusätzlich eine 100%-Höhe zuweist, somit erstrecken sie sich auch über die Höhe des Browserfenster, die den 100% entspricht, hinaus.

mfg Maik

Hallo!
Danke fuer deine Antwort

Ja, ich dachte schon daran, dass es mit denen was zu tun hat...aber ich weiss einfach nicht, was ich jetzt alles wegnehmen muss.

Duerfen jetzt die inneren nicht mehr absolut positioniert sein? Ich hatte es erst ohne, dann war aber im Opera das Untermenue verschoben weil die Abstaende unterschiedlich waren.

Oder soll ich alle height:100%; bei den ganzen anderen div, ausser dem ersten rausnehmen?

Ich steh total an, hab irgendwas verschachtelt und verknotet, auch im Hirn

edit: ok, ich hab nurn die absoluten Positionen rausgenommen bei den drei div und auch height:100%; aber es hat sich nichts veraendert:/

*waves*
Necro

Nimm einfach bei den drei genannten DIVs die height:100%-Deklaration aus der Regel raus

mfg Maik

Hm..ok hab ich, aber es tut sich genau gar nichts

edit: ich bin so ein Trottel, wenn man das file neu abspeichert, dann sollte man nicht das alte aufrufen! *Kopf gegen die Wand schlag*

Gut, jetzan ist die Seite 100% und einen Pixel mehr...aber gut und hat nen leeren Scrollbalken..auch nicht so schlimm...

aber dafuer geht jetzt weder die Navigation, noch der Inhalt bis runter zur Adresszeile

Hast du die Änderungen auch im richtigen Stylesheet vorgenommen?

In deinem Attachment befindet sich die CSS-Datei style5.css, im HTML-Dokument rufst du aber style4.css auf.

Bei mir bringt der Vorschlag nämlich sehr viel.

Zitat von Necro_nomicon

edit: [...]

aber dafuer geht jetzt weder die Navigation, noch der Inhalt bis runter zur Adresszeile

In dem Artikel AnyColumnLongest findest du zahlreiche Verweise zu Techniken, um in einem Layout die Spaltenhöhen, unabhängig von ihrem jeweiligen Inhalt, automatisch anzugleichen .

mfg Maik

Zitat von Necro_nomicon

Gut, jetzan ist die Seite 100% und einen Pixel mehr...aber gut und hat nen leeren Scrollbalken..auch nicht so schlimm...

Bei mir hat die Seite keinen Pixel mehr in der Breite und Höhe, ansonsten würden die Browser einen Scrollbalken einblenden, denn den "leeren" vertikalen Scrollbalken seh ich nur im IE.

Lösung:

Code :

1 2 3 4 5 6 7 8 9 10 11 12

html, body {         margin:0px;         padding:0px;         font-family:Verdana, sans-serif;         font-size:10pt;         color:#2A596C;         height:100%;         width:100%;         border:none;         background:#000000;         [B]overflow:auto;[/B]         }

mfg Maik

Danke!

Das ist eine verdammt gute Seite!

Bei manchen Beispielen hat mich das Javascript aber noch abgeschreckt. Jedenfalls probier ich grad das mit dem pre-Tag.
Funktioniert auch, heisst geht auch bis runter, nur das nun wieder die Hoehe mehr als 100% ist *sigh*

Es ist zum verzweifeln. Irgendwo ist das der Hund drinnen. Und versteckt sich vor mir...

Zitat von Necro_nomicon

Jedenfalls probier ich grad das mit dem pre-Tag.
Funktioniert auch, heisst geht auch bis runter, nur das nun wieder die Hoehe mehr als 100% ist *sigh*

Kannst du mal den Link zu der Variante nennen, denn ich weiß grad nicht, welche das ist?

Und wie hast du sie auf dein Layout angewendet?

mfg Maik

Ist folgender link:
http://www.positioniseverything.net/...l.stretch.html

Hab den Inhalt bei div=vier und den Inhalt von div=navi in pre-Tags gegeben.
dann hab ich ihm stylesheet das pre-Tag definiert.

hab statt vier und navi nun div#vier und div#navi.

Allerdings, wenn der Text weniger ist klappt das bei mir Nuesse....
wollte gerade die ganze Datei neu aufbauen nach dem Beispiel, weil ma vielleicht irgendwelche anderen Angaben in die Quere kommen und dazuheulen....

+++edit+++
Ich hab jetzt nach dem Beispiel oben das ganze neu aufgebaut und es scheint zu funken.
Hab statt einem Header das Bild als Hintergrund im h1.
Und dann hab ich den Footer dazugegeben mit postion:absolute.
Das funkioniert so weit auch alles *freu*

Allerding muss ich jetzt ja noch die anderen div einbauen (eins, zwei, inhalt, vier), damit der Aufbau stimmt. Mal schaun, ob das dann nicht wieder alles zusammenhaut.

Das pre-Element dient in dem in dem Beispiel lediglich zur Auszeichnung des Quellcodes

mfg Maik

Ja, bin ich grad draufgekommen dachte ist was neues *g*

Jedenfalls ist es so, dass dieser Aufbau sich ueber ein Hintergrundbild definiert.
Dadurch funktioniert es auch. Soweit so gut.

Wenn ich nun die diversen anderen div-Tags einarbeite, dann funkt das mit dem Inhalt, aber natuerlich nicht mit denen, die ein Hintergrundbild haben, weil das Hintergrund vom body vorrangig ist..

Tja, Notloesung waere fuer den inneren Bereich vielleicht einfach ne Table zu machen?
Koennte das funken, oder ist sowas generell ein Bloedsinn?

hm....geht sich bei meinem Layout aus, da es die gleiche Farbe ist. Werd mal einfach das Bild aendern...

die einzigen Probleme sind jetzt noch, dass sich ein repeat-bild einbringen muss und dann stimmt der Abstand noch wo nicht..

ich mach mich auf die Suche

arghl....jetzan funkt es f
nur noch ein Problem ist da...
wie mach ich nun neben dem abgerundeten Bild (ist das Bild im div=zwei), dass ein Balken in der gleichen Farbe weitergeht auf die ganze Breite...Hintergrundbild geht nicht, weil da schon eines drinnen ist......

Allerdings nimmt er auch bei div=vier die Hintergrundfarbe hellblau.
Warum nimmt er sie dann nicht bei div=zwei

+++edit+++ weil man die width auf 100 setzen muss....argl.

Jetzt schein es wirklich zu funken!

+++edit+++
bis auf eines *heul*
es funkt zwar im IE und im Firefox, aber wenn im Inhalt mehr Text drinnen ist geht der Footer nicht mit runter((((

Noch jemand ne Ahnung?

+++edit+++
footer funkt.....
Nur noch die Hintergrundfarbe hellblau geht nicht mir runter, wenn mehr Text ist...

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

 

<title>3 Col Stretch</title>

<meta name="Big John" content="August 24, 2002" />

<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" /> 
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" />
<meta name="description" content=" A demo of 3 fluid, full height columns, including header and footer, all with different BGs. " />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="robots" content="all" />

<meta http-equiv="imagetoolbar" content="no" />
<link rel="SHORTCUT ICON" href="im/favicon.ico" />

<style type="text/css">
<!--

html {margin: 0; padding: 0;}

body {margin: 0; padding: 0; font-family: verdana, sans-serif; font-size: 80%;
           background: #6FAFAA repeat-y url(img/bg_pic.gif);
		
		   overflow:auto;}
           

pre {margin: 0; font-family: verdana, sans-serif; font-size: .9em;}

a {color: #000;}

.alignright {margin-top: 0; text-align: right;}

.small {font-size: .9em;}

.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}

/*******************************************************************************
                       Positioning rules
*******************************************************************************/



div#leftbox {      /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
left: 10px;
width: 150px;
color: #ee8;
padding-top: 10px;

}

#middlebox {
position:absolute;
bottom:25px;
top:96px;
left:200px;
right:0px;
/* padding: 10px; */
background-color: #6FAFAA;     /*** This div has a background to cover the 2-tone body BG ***/
}

div#rightbox {    /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
right: 25px;     /*** IE5/mac will show a horizontal scrollbar 
		if this is less than 16px, or other units are used
		http://www.l-c-n.com/IE5tests/right_pos/index.shtml ***/           
width: 30%;
color: #820;
padding-top: 10px;
}


/*** VON MIR NEU ***/
/* h5 ist der header */
h5 {
	background-image:url(img/layout_035_2.jpg);
	background-repeat:repeat-x;
	margin:0px;
	}
/*** h6 ist der footer 
h6 {
	background-image:url(img/grau.gif);
	background-repeat:repeat-x;
	background-color:#B4B4B4;
	height:25px;
	margin:0px;
	} ***/
#unten {
	position:fixed;
	bottom:0px;
	height:25px;
	background-image:url(img/grau.gif);
	background-repeat:repeat-x;
	background-color:#B4B4B4;
	width:100%;
	}
#adressleiste {
	position:absolute;
	background-color:#B4B4B4;
	width:100%;
	height:25px;
	padding:0px;
	bottom:0px;
	margin:0px;
	}

/* CONTENT VORBAU */
#eins {
	font-weight:bold;
	font-size:10pt;
	line-height:2em;
	height:20px;
	color:#D5E4EE;
	padding-left:5px;
	padding-right:5px;
	text-align:right;
	}
#zwei {
	position:absolute;
	top:25px;
	left:0px;
	/*** background-color:#D5E4EE;
	background-image:url(img/layout_035_7.jpg);
	background-repeat:no-repeat; ***/
	height:25px;
	width:100%;
	background-color:#D5E4EE;
	}


#drei {
	position:absolute;
	top:50px;
	left:0px;
	width:100%;
	height:3px;
	line-height:3px;
	margin:0px;
	padding:0px;
	background-color:#6FAFAA;
	}

/* vier - hier ist der eigentlich Inhalt drinnen */
div#vier {
	position:absolute;
	top:53px;
	left:0px;
	bottom:0px;
	background-color:#D5E4EE;

	width:100%;
	}	
#top_navigation {
	/* position:absolute; */
	/* top:30px; */
	/* left:35px; */
	width:100%;
	height:25px;
	}
a.top_link {
	display:block;
	position:absolute;
	font-family:Verdana, sans-serif;
	font-size:10pt;
	text-decoration:none;
	color:#1266A4;
	margin-left:35px;
	}
a.top_link:link, a.top_link:visited {
	color:#1266A4;
	}
a.top_link:hover, a.top_link:active {
	color:#FFFFFF;
	background-color:#1266A4;
	}
a#ziele {
	bottom:0px;
	text-decoration:none;
	}
a#statuten {
	bottom:0px;
	left:40px;
	text-decoration:none;
	}

-->
</style>
</head>

<body>

<h5>
<img src="img/layout_035_1.jpg" width="640" height="96" alt="Logo">
</h5>


<div id="leftbox">

	<p>

	<strong>This column</strong> has a background provided by a vertically repeating image on the body.
	The image is as wide as the left margin on the middle column, and 20px high, to reduce the number 
	of image repeats, allowing quicker rendering. 
	</p>
	The column content (#leftbox) 
	is absolutely positioned into that left margin area, and given a pixel 'width'. This is necessary due to the
	underlying background image.</p>
	
</div>
<!-- 
<div id="rightbox">    
<pre>
<strong>#rightbox</strong> {
position: absolute;
right: 2%;
width: 30%;
}
</pre>
<p>
<strong>This column</strong> also allows the 'body' background to show, but since the 'body' BG image is repeated
only vertically, and is only as wide as the middle column's left margin, the 'body' background-color shows 
here instead. The 'width' of this column, and the margin area in which it sits are defined as percentages,
but may be given in other units if desired.
</p>
<p>
If the page is narrowed below 640px wide, the rigid 'pre' elements in the middle and right columns
may cause the content to overlap.
</p>
<p>
<a href="#"><strong>Test link</strong></a>
</p>

</div>
-->

<div id="middlebox">

	
	<div id="eins">

			xyuser angemeldet | abmelden | <img src="img/sitemmap.gif" alt="Button Sitemap" align="bottom"> | 
								<span style="font-size:8pt">A</span><span style="font-size:10pt">A</span><span style="font-size:12pt">A</span></div>
	<div id="zwei"><img src="img/layout_035_7.jpg" width="33" height="25" id="balken" alt="Test">
			<div id="top_navigation">
						<a href="ziele.html" class="top_link" id="ziele">Ziele</a> 
						<a href="statuten.html" class="top_link" id="statuten">Statuten</a></div> 
				</div>

	<div id="drei">&nbsp;</div>
	<div id="vier">
			
			<h1>&Uuml;berschrift</h1>
					<p>Lorem ipsum sdf sjdflk jsdfkl sdjfkl sdjkfl dsfjkl djsfkl dsjfl dsjklf dsflk djsfkl djksfl dsjfkl sd
					sdjf sdjklf djsfk djsfkl djsf sdjklf sdjlf djlsfk sdjlf sdjklf djsklf djskl fj sdf dsf sdf </p>
					<p>Das ist ein <a href="test.html">Link</a>.</p>
					<h2>&Uuml;berschrift 2</h2>

					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p>
					
					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p>
					
					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p>
					
					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p><p>Lorem ipsum</p>

					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p>
					
					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p>
					<p>Lorem ipsum</p>
				
			</div>

		
</div>

<div id="unten">
<img src="img/grau.gif" width="2" height="2">Adresse</div>

</body>
</html>

Wie oben geschrieben....es funkt, bis auf zwei Sachem:
1.)
Der Footer ist jetzt dank position: fixed, immer unten, aber auch wenn man das Fenster kleiner macht. Schoener waere da schon eine Loesung, dass wenn mehr Text ist, der Footer mit runtergeht.

2.)
Die Hintergrundfarbe #D5E4EE beim Inhalt geht nicht bis ganz runter, wenn der Text laenger wird. Sie geht nur bis zu den 100% der Fenstergroesse, egal ob wenig oder viel Inhalt drinnen ist.

Any ideas?

HTML-Code:

div#vier {
	position:absolute;
	top:53px;
	left:0px;
	bottom:0px;
	background-color:#D5E4EE;
	width:100%;
	}