[CSS]Div-lengte relateren aan onderkant viewport - Softwareontwikkeling

woensdag 5 juli 2006 11:36

Acties:

Aut viam inveniam aut faciam

Topicstarter

Hallo!

Ik heb een website waar een container-div in staat met een achtergrond. Deze wil ik de lengte geven van mijn browservenster. Een goede optie die ik hierover vond staat hier omschreven:

http://www.quirksmode.org/css/100percheight.html

Nu heb ik echter 2 problemen met deze methode:
1. Mijn DIV-tag begint niet precies bovenaan de pagina, dus als de hoogte 100% is, loopt de div wat naar onder door.
2. Als de content langer is dan de div, dan wordt de div gewoon afgebroken in Firefox en komt de content buiten de div te staan. (in IE gaat het wel goed)

Heeft iemand een mogelijke oplossing voor deze problemen?

woensdag 5 juli 2006 12:47

Acties:

crisp

Devver

Pixelated

1) Zorgen dat de DIV wel bovenaan begint; daarbinnen kan je andere elementen dan naar onder verplaatsen mbv een top-margin.
2) Voor standards-compliant browsers geen height maar min-height gebruiken.

Intentionally left blank

woensdag 5 juli 2006 13:17

Acties:

Rowanov

Kop eens wat anders...

Als aanvulling op punt 1; margin en padding van de body op 0 zetten.

woensdag 5 juli 2006 14:53

Acties:

Verwijderd

Ik ben laatst toevallig ook met een dergelijk geval aan het prutsen geweest en heb naar mijn mening wel een acceptabele oplossing gevonden. Een voorbeeldje staat hier , klik op de linkjes voor verschillende hoogten. Dit maakt gebruik van een absoluut gepositioneerde footer en extra div om daar ruimte voor te maken. Er zit een hack in voor ie5 mac maar die zou je ook weg kunnen laten. Code ziet er dan ongeveer als volgt uit:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>untitled document</title>
<link href="cssfiles/mainsheet.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="wrapper">
    <div id="content"></div>
    <div id="clearfooter"></div>
    <div id="footer"></div>
</div>
</body>
</html>

relevante css:

Cascading Stylesheet:

/* commented backslash hack \*/ 
html, body { height:100%; } 
/* end hack */

* { margin: 0; padding: 0; border: 0; }
body { text-align: center; } /* centre voor ie5.+*/

/*////Wrapper////*/
#wrapper {
    position: relative;
    min-height:100%;
    height: auto;
    width: 760px;
    text-align:left;
    margin: 0px auto;
        }
* html #wrapper {
    height:100%;
    }
#clearfooter { clear:both; height:25px; width:100% } /* met de height ruimte maken voor footer*/
#footer {
    width: 100%;
    position:absolute;
    bottom:0;
    left:0;
    height: 25px;
    }