WCM Forum - [CSS] Scrolling in horizontal zweigeteilter Seite

WCM Forum (http://www.wcm.at/forum/index.php)

- Programmierung (http://www.wcm.at/forum/forumdisplay.php?f=17)

- - [CSS] Scrolling in horizontal zweigeteilter Seite (http://www.wcm.at/forum/showthread.php?t=161281)

[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

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

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

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

gruss,
snowman