[CSS] Uitrekken naar hoogte

[Pingelmonster]

Ik ben bezig met een website voor een kennis van me en ik wil het deze keer proberen met CSS/XHTML.
Nu heb ik met CSS 2 "fixed frames" gemaakt. Een TopFrame en een BottomFrame. De bedoeling is dat de TopFrame vastzit aan de bovenkant van de pagina, en de BottomFrame aan de onderkant van de pagina en ze moeten paginabreed zijn. Dit is me gelukt.

Nu is er een grote lege ruimte tussen de twee frames, die wil ik opvullen met aan de linkerkant een menu (grijze achtergrond) wat zich helemaal uitstrekt over de hoogte tussen het TopFrame en BottomFrame (zie illustratie) maar ik kom er niet uit. Heeft iemand hier een truukje voor?



Ik weet dat deze vraag al vaker is gesteld maar het inleven in situaties bij de anderen is voor mij wat lastig.

[XWB]

maar ik kom er niet uit

Waarom niet? Toon eens wat code

[Padschild]

Wil je dat die fixed frames altijd in beeld zijn? Daar zijn echt hoop voorbeelden voor te vinden namelijk... Voor bijna elke manier is wel een voorbeeld te vinden eigenlijk

[P-e-t-j-e]

Zo moeilijk is het toch niet of zit ik er nu langs?

<frameset rows="20,*,20">
<topframe>
<frameset cols="200,*">
<linkerframe>
<rechterframe>
</frameset>
<bottomframe>
</frameset>

Na al die moeite voor dat plaatje heb ik de moeite maar genomen voor een voorbeeldje

[MichielioZ]

Een frameset is wel een erg "ouderwetse" manier om dit op te lossen, denk dat daarom de topicstarter ook een CSS oplossing zocht...
Zoek anders eens op "faux columns" op google...
Om het je dan maar heel gemakkelijk te maken :

HTML:

<div style="width: 100%; height: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding: 20px 0 20px 0;">
  <div id="topbar" style="position: absolute; top: 0; width: 100%; height: 20px; background: red;">Top</div>
  <div id="bottombar" style="position: absolute; bottom: 0; width: 100%; height: 20px; background: green;">Bottom</div>
  <div id="center" style="position: relative; width: 100%; height: 100%;">Content</div>
</div>

[disjfa]

MichielioZ schreef op dinsdag 05 juni 2007 @ 01:25:
Om het je dan maar heel gemakkelijk te maken :

Ik copy paste code en het werkt al niet in mijn browser. Dus als ik geen IE gebruik werkt het al niet. Dat zat wat helpen aan de ts

Ik begrijp ook al verder niet waarom de ts dit zou willen aangezien niet iedereen full screen browsed en je eerder moet gaan bedenken wie dit zou willen. Maar daar gelaten.

[moozzuzz]

disjfa schreef op dinsdag 05 juni 2007 @ 01:39:
Ik begrijp ook al verder niet waarom de ts dit zou willen aangezien niet iedereen full screen browsed en je eerder moet gaan bedenken wie dit zou willen. Maar daar gelaten.

Hoeft men toch niet fullscreen voor te browsen of versta ik je verkeerd?

Ik heb (na vele pogingen om de container er uit te gooien --> want semantisch niet zo interessant) volgende opstelling (met container) :

HTML:

<LINK rel="stylesheet" type="text/css" href="./default.css" media="screen, print">
<!--[if IE]>
<link href="./defaultIE.css" rel="stylesheet" type="text/css">
<![endif]-->

Cascading Stylesheet:

/* defaultIE.css */
body {
    height:   100%;
}

Cascading Stylesheet:

/* default.css */
html {
    margin: 0px;
    padding:0px;
    height: 100%;
    background: url('bg.html.jpg') #7ece66 repeat-x;
    text-align: center;
}

body {
    position: relative;
    width:    700px;
    margin:   0px auto;
    padding:0px;
    min-height:   100%; /* css compliant */
}

#container {
    position: relative;
    margin: 0px;
    padding:0px;
    min-height: 100%;
}

#content {
    margin: 0px;
    min-height: 100%; /* css compliant */
}

#header {
    position: absolute;
    top:  0px;
}

#menu     {
    position: absolute;
    left: 10px;
    top:  169px;
    width: 165px;
}

#footer {
    position: absolute;
    bottom: 0px;
}

Heb het fancy gedeelte eruit gehaald 8^)