[xhtml/css]Een header en een footer div auto resize main div - Softwareontwikkeling

woensdag 17 maart 2004 14:02

Acties:

mzzl

Topicstarter

Ik heb een probleempje ik wil een pagina maken die een header en een footer heeft en die altijd in het scherm blijven.

De hoofdpagina wat dus tussen header en footer komt moet altijd 100% beeld vullend zijn.

wat ik heb(en dus niet goed werkt):
linkje

HTML:

  <body>
    <div id="top"></div>
    <div id="main"> </div>
    <div id="bottom"></div>
  </body>

Cascading Stylesheet:

#main 
{
    position: absolute;
    border: black 1 solid;
    height: 100%;
    width: 100%;
    top: 75px;
    bottom: 75px;
}

#top
{
    position:absolute;
    border: black 1 solid;
    top: 0px;
    height: 75px;
    width: 100%;
}

#bottom
{
    position:absolute;
    border: black 1 solid;
    bottom: 0px;
    height: 75px;
    width: 100%;
}

zoals je ziet werkt het aan de boven kant goed maar onderaan gaat de main div gewoon onder de bottom div door. Main houdt height: 100% en wordt alleen opgeschoven door top: 75px.

Ik heb overal gezocht en van alles geprobeerd ik kan echt geen oplossing vinden ik heb ook al met margin enzo dingen lopen proberen maar geen resultaat.

http://www.slobmotorsport.nl - iRacing Profiel

woensdag 17 maart 2004 14:28

Acties:

Pelle

🚴‍♂️

Scroll es naar beneden.. minder dan een dag geleden was er nog iemand die eenzelfde probleem had:
[rml][ xhtml + css] Positioneren van Divjes[/rml]

woensdag 17 maart 2004 15:17

Acties:

Linc

mzzl

Topicstarter

hmm ja daar staat niet echt het antwoord in ... dat voorbeeld wat gegeven wordt laat de divjes dus wel overelkaar heengaan en dat is dus niet de bedoeling.

http://www.slobmotorsport.nl - iRacing Profiel

woensdag 17 maart 2004 15:21

Acties:

Rickets

Finger and a shift

Als je eerst hierheen gaat en dan dit doet, dan komt het vast goed.

If some cunt can fuck something up, that cunt will pick the worst possible time to fucking fuck it up, because that cunt’s a cunt.

woensdag 17 maart 2004 15:22

Acties:

T-MOB

Ik ben ff aant knoeien geweest... met het IE box-model kan denk ik wel wat jij wilt.
Zie mijn testje

Nu doet ie het ook goed in firefox.... :-)

[ Voor 27% gewijzigd door T-MOB op 17-03-2004 15:32 ]

Regeren is vooruitschuiven

woensdag 17 maart 2004 15:29

Acties:

JJvG

Even mijn bookmarks geraadpleegd en dit topic er uit gevist...

Succes!

woensdag 17 maart 2004 15:32

Acties:

Linc

mzzl

Topicstarter

T-MOB schreef op 17 maart 2004 @ 15:22:
Ik ben ff aant knoeien geweest... met het IE box-model kan denk ik wel wat jij wilt.
Zie mijn testje (ie only )

Ik ga ff opzoeken hoe je mozilla in ie-box krijgt zodat het allemaal netjes met doctype enz aan de praat is...

tnx zo moet het dus worden ja.

Maar dan wel xhtml1.0 strict

http://www.slobmotorsport.nl - iRacing Profiel

woensdag 17 maart 2004 15:39

Acties:

faabman

the_Emperor schreef op 17 maart 2004 @ 15:32:
tnx zo moet het dus worden ja.

Maar dan wel xhtml1.0 strict

het lijkt me dat dit bericht [rml]Anne in "[ xhtml + css] Positioneren van Divjes"[/rml] toch wel je antwoord bevat

doctype daar is html 4.0, maar, dat hoeft afaik in deze context niet uit te maken...

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

woensdag 17 maart 2004 15:42

Acties:

Pelle

🚴‍♂️

the_Emperor schreef op 17 maart 2004 @ 15:17:
hmm ja daar staat niet echt het antwoord in ... dat voorbeeld wat gegeven wordt laat de divjes dus wel overelkaar heengaan en dat is dus niet de bedoeling.

Zoals gezegd wel

Ff op dat linkje van Anne klikken en je weet 't.

woensdag 17 maart 2004 15:44

Acties:

T-MOB

In dat linkje van JJvG zit dan de oplossing:

crisp schreef op 10 november 2003 @ 20:04:
[...]

zo wel:

HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

html, body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

#container {
  height: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
  -moz-box-sizing: border-box;
}

#top {
  position: absolute;
  top:0px;
  left:0px;
  height: 80px;
  width: 100%;
  background-color: red;
}

#content {
  position: relative;
  height: 100%;
  overflow: auto;
  background-color: yellow;
}

#bottom {
  position: absolute;
  bottom:0px;
  left:0px;
  height: 80px;
  width: 100%;
  background-color: red;
}

</style>
<body>
<div id="container">
  <div id="top">top</div>
  <div id="content">
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
  </div>
  <div id="bottom">bottom</div>
</div>
</body>
</html>

blijkbaar kiest Opera toch voor het IE-model, en is de box-sizing niet nodig ofzo

Dees doet het.... ook met een strict doc-type

Regeren is vooruitschuiven

donderdag 18 maart 2004 16:37

Acties:

Linc

mzzl

Topicstarter

<?xml version="1.0" encoding="ISO-8859-1"?>

waarom geeft die als niet strict als ik hem check in http://validator.w3.org ??

[ Voor 17% gewijzigd door Linc op 18-03-2004 16:37 ]

http://www.slobmotorsport.nl - iRacing Profiel

donderdag 18 maart 2004 16:40

Acties:

Verwijderd

Omdat je een PI en een DOCTYPE door elkaar haalt. Een PI moet je trouwens nooit gebruiken als je het content-type 'text/html' gebruikt (erg waarschijnlijk).

donderdag 18 maart 2004 16:44

Acties:

Linc

mzzl

Topicstarter

maar dat wordt in het voorbeeld boven mij ook gedaan, maar dit mag dus niet. Dus is het voorbeeld boven mij ook niet strict.

http://www.slobmotorsport.nl - iRacing Profiel

donderdag 18 maart 2004 16:52

Acties:

Verwijderd

Correct. Het is handiger om dingen zelf ook te snappen dan altijd uit te gaan van code van anderen.