merkwürdiges Prob. mit height:100%

FaFoo

Also ich steh gerade vor einem Rätsel... ich weiß auch gar nicht wie ichs groß beschreiben sollte... schaut euch den Quelltext einfach an und haut den in eine html-Datei. Und variiert die Größe des Browserfensters... es geht um den Abstand zum unteren Fensterrand.

Ich hoffe jemand macht sich die Mühe... ist jedenfalls sehr interessant, finde ich...
Ach ja und den Blindtext solltet Ihr dann stark verlängern so das er viel zu lang ist fürs Browserfenster.... (egal welche Größe)

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>


<head>
	<title>start10</title>
	<meta name="author" content="mindwerk ag" />
	<meta http-equiv="content-language" content="de" />
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<meta http-equiv="content-style-type" content="text/css" />
</head>


<body id="body" onload="text();">
<div style="color:#FFF;background-color:#000;width:400px;height:75%;padding-top:200px;padding-left:100px;">
	<div style="background-color:#333;width:500px;height:200px;position:absolute;top:0;left:0;"></div>
	<div style="width:100px;background-color:#666;position:absolute;top:200px;left:0;">
		<ul>
			<li>LINK</li>
			<li>LINK</li>
			<li>LINK</li>
			<li>LINK</li>
			<li>LINK</li>
			<li>LINK</li>
			<li>LINK</li>
		</ul>
	</div>
	<div style="overflow:auto;height:100%;">
		ANFANG:Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
	</div>
</div>
</body>
</html>

Alles anzeigen

Gruß,
Markus

Friedel

Ich habe es nicht getestet, aber das wäre wohl auch sinnlos. Ich habe die test.css ja nicht.

Beim Laden der Seite wird die JavaScript-Funktion text() aufgerufen. Die gibt es bei dir aber gar nicht.

Wie die Seite darbestellt wird, hängt natürlich stark von der test.css ab. Dein äußeres Div hat die Eigenschaft height:75%. Das funktioniert nur, wenn dafür auch ein Bezugsmaß festgelegt ist. Also muss auch der Body eine Höhenangeben haben. Je nach Browser und Doctype kann das auch für das Html-Element nötig sein, obwohl das kein Blockelement ist und im Standard nicht vorgesehen ist, dass man diesem Element einen Höhe geben kann.

koslowski

Hi,

Zitat von Friedel

Je nach Browser und Doctype kann das auch für das Html-Element nötig sein, obwohl das kein Blockelement ist und im Standard nicht vorgesehen ist, dass man diesem Element einen Höhe geben kann.

html bekommt sogar i.d.R. standardmäßig eine Höhe von 100% zugewiesen.
Einige geben sogar 100.1%, um dem leichten Springen im FF zu begegnen, wenn sich dort der vertikale Scrollbalken zuschaltet.;-)

koslowski

FaFoo

Ach ich bin auch einfach ein Trottel... mit der test.css oder dem Javascript hat das nichts zu tun... das hatte auch keine Auswirkungen. Alle nötigen Styleangaben hab ich inline angegeben.
Und das ich ein Bezugsmaß für die Höhe von 100% brauche ist mir auch klar.

Ich hatte einfach nur die 75% übersehen, weil ichs einfach reinkopiert hatte. Da sollte eigentlich 100% stehen.

Das was ich so merkwürdig fand, war, dass in kleinen Auflösungen die Seite zu lang war und in großen Auflösungen zu kurz... was sich aber durch die 75% erklärt die sich mit den 200px aus dem head div ergänzen.

Aber falls jemand von euch weiß wie ich ein div "Resthöhe-füllend" machen kann (quasi 100% - 200px vom head), möglichst ohne JS... dann wär ich sehr dankbar...

gruß Markus

sejuma

Prozent und Pixel kannst du nicht miteinander "verrechnen".
Prozent ist relativ und bezieht sich auf den Viewport, der bei jedem Benutzer unterschiedlich sein kann. Pixel dagegen ist eine fixe Einheit.

Mir ist nicht ganz klar, wie dein Layout aussehen soll.
Vielleicht ist da was dabei:
http://www.ohne-css.gehts-gar.net/0044.php
http://www.ohne-css.gehts-gar.net/0025.php

Tags