[CSS] Scrolling in horizontal zweigeteilter Seite

T.dot · 14.03.2005, 21:57

Aufs wesentliche gekürzt schaut das Problem so aus:

2 DivBoxen untereinander, eine davon ist am Seitenende positioniert. Die andere soll den Rest der Seite ausfüllen und eine Scrollbar bieten (falls erforderlich).

Problem: Die Scrollbar haut nur hin, wenn ich dem oberen Div eine fixe Höhe gebe, dann bleibt aber je nach Auflösung natürlich ein Abstand zwischen Content und Footer.

anschaun kann man sich das hier:
http://members.aon.at/stemmer/lalala.html

Source ist folgender

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="overflow:hidden">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>123</title>
</head>
<body style="overflow:hidden">
<div style="width:100%;height:100%;">
	<div style="overflow:auto;height:200px">
	langerText










	langerText










	langerText










	</div>
	<div style="position:absolute;bottom:0px;height:50px;
	width:100%;background-color:#009900;"> Footer </div>
</div>
</body>
</html>

Meine Frage: Geht das auch ohne fixen Height-Wert (dh. div passt sich automatisch an) oder gibts sowieso keine Lösung?

Und keine Angst, ich google schon, find aber hauptsächlich die ColumnLayouts.

mfg Thomas

snowman · 15.03.2005, 08:00

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="overflow:hidden">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>123</title>
</head>
<body style="overflow:hidden; height:100%;">
<div style="overflow:auto;height:100%; width:100%;">
	langerText










	langerText










	langerText










langerText










	langerText










	langerText










langerText










	langerText










	langerText










langerText










	langerText










	langerText










langerText










	langerText










	langerText










langerText










	langerText










	langerText










	</div>
	<div style="position:absolute;bottom:0px;height:50px;
	width:100%;background-color:#009900;"> Footer </div>
</body>
</html>

gruss,
snowman

T.dot · 15.03.2005, 08:20

Danke, deine Lösung funktioniert (bei mir zumindest) leider nur im IE und ned in Opera/Firlefox

Folgendes hab ich gestern gefunden:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Fixed footer</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="basic2.css">
</HEAD>
<BODY>
<DIV id="footer">Futter</DIV>
<DIV id="content">
	langerText




	langerText




	langerText




	langerText




	langerText




	langerText




	langerText




	langerText




	langerText




	langerText




	langerText




	langerText			
</DIV>
</BODY>
</HTML>

CSS:

Code:

BODY {
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 100px; 
	MARGIN: 0px; 
	PADDING-TOP: 0px
}
DIV#footer 
{
	LEFT: 0px; WIDTH: 100%; BOTTOM: 0px; POSITION: absolute; HEIGHT: 50px
}
@media Screen    
{
	UNKNOWN {POSITION: fixed}
}
HTML BODY 
{
	OVERFLOW: hidden
}
 HTML DIV#content {
	OVERFLOW: auto; HEIGHT: 100%
}

Das ganze funktioniert aber NUR, wenn man genau diesen Doctype verwendet. Nachdems in IE, Opa, Firlefox funkt und W3C Valid ist denke ich, dass des passen müsst

mfg Thomas

snowman · 15.03.2005, 08:22

Hast recht. hab ich mir nicht angesehen. Es gibt aber auch xhtml-Lösungen, müßte ich aber auch suchen.

gruss,
snowman

14.03.2005, 21:57	#1
T.dot Master Registriert seit: 13.08.2003 Beiträge: 624	[CSS] Scrolling in horizontal zweigeteilter Seite Aufs wesentliche gekürzt schaut das Problem so aus: 2 DivBoxen untereinander, eine davon ist am Seitenende positioniert. Die andere soll den Rest der Seite ausfüllen und eine Scrollbar bieten (falls erforderlich). Problem: Die Scrollbar haut nur hin, wenn ich dem oberen Div eine fixe Höhe gebe, dann bleibt aber je nach Auflösung natürlich ein Abstand zwischen Content und Footer. anschaun kann man sich das hier: http://members.aon.at/stemmer/lalala.html Source ist folgender Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html style="overflow:hidden"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>123</title> </head> <body style="overflow:hidden"> <div style="width:100%;height:100%;"> <div style="overflow:auto;height:200px"> langerText langerText langerText </div> <div style="position:absolute;bottom:0px;height:50px; width:100%;background-color:#009900;"> Footer </div> </div> </body> </html> Meine Frage: Geht das auch ohne fixen Height-Wert (dh. div passt sich automatisch an) oder gibts sowieso keine Lösung? Und keine Angst, ich google schon, find aber hauptsächlich die ColumnLayouts. mfg Thomas

15.03.2005, 08:22	#4
snowman Inventar Registriert seit: 26.09.1999 Beiträge: 2.569	Hast recht. hab ich mir nicht angesehen. Es gibt aber auch xhtml-Lösungen, müßte ich aber auch suchen. gruss, snowman ____________________________________ MediaMarkt? Ich bin doch nicht blöd, Mann! Vorsprung durch Technik Lesen Sie keine Anleitungen, FAQs, Readme - Files. Reine Zeitverschwendung. In den Newsgroups und Foren gibt es genug kompetente Leute, die mit großer Geduld immer wieder dieselben einfachen Fragen beantworten. Völlig kostenlos noch dazu!

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)