sidebar height 100% (css)

[Gast]

hallo,

zit weer men een probleempje dat ik niet kan loslaten.

Ik wil men sidebars (menu + sidebar) over de volledige vericale lengte plaatsen.

Nu, wat ik ook probeer, 100% loopt maar net zo ver als de grote van resolutie.

De 'werken' vind je hier: Passion Style - Tuning | Home

Let wel op: ik heb een afzonderlijke css voor IE, en daar gaat het nu even niet om. Dus best niet met IE openen.

Ik werk met xhtml en css.

de 'sidebar' (rechter vlak) staat op height 100%.

iemand hier een ideetje voor? heb al vanalles geprobeerd, maar niet het juiste blijkbaar.

greetz,

fb

[Gast]

Het is net 100% van men browser, maar niet van de pagina

[Gast]

iemand een ideetje?

[XiroN]

als ik het goed begrijp moeten het menu en de sidebar ook volledig tot beneden lopen net zoals het middelste vlak?

Correct?

Grtz

[Gast]

Ja, de situatie is als volgt:

mijn middelste vak (div 'content') wordt automatisch aangepast naar gelang de tekst en afbeeldingen die ik erin zet.

Mijn onderste vak (div 'footer') staat ingestelt dat die er altijd gewoon onder komt. Dus die wordt mee verplaatst.

Nu wil ik dat men die vakken links (div 'menu') en recht (div 'bar') ook mee "rekken" naar gelang de grote van men 'content'.

De sidebar ('bar') heb ik zo proberen aan te passen. Ik dacht dit simpel te doen, daar de height op 100% te zetten. Maar dan rekt hij enkel tot de grote van je browser, en niet de grote van je pagina.

[Tom]

Style{

html, body {

height: 100%;

min-height:100%;

}

#container{

min-height:100%;

}

.menu {

position: absolute;

left: 8px;

padding: 0px;

top: 112px;

width: 140px;

border: solid;

bottom: 20px;

min-height:100%;

}

.content {

margin-left: 145px;

padding: 0px;

margin-right: 158px;

top: 155px;

border: solid;

bottom: 0px;

min-height:100%;

}

.bar {

position: absolute;

right: 8px;

margin: 0;

padding: 0;

top: 112px;

width: 155px;

border: solid;

bottom: 0px;

height: 100%; - verwijderen!

min-height:100%;

}

}

<div id="container">

<div class="menu">

....

</div>

<div class="content">

....

</div>

<div class="bar">

....

</div>

</div>

Ik zou dit eens proberen, het rode is hetgeen je moet toevoegen.

[Gast]

bedankt voor de hulp, maar het heeft niets uitgehaald

met height, blijf het de hoogte van het venster nemen, en niet die van de pagina.

Lijkt erop voor mij, dat het niet gaat ofzo??? Ik zal het dan maar anders moeten oplossen, nog een div onder het menu en side bar gooien ofzoiets.

[leroy]

je moet het menu, de tekst van de pagina en je sidebar eens in een tabel zetten.

dus krijg je zoiets:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
    <td valign="top">menu</td>
    <td valign="top">Inhoud van de pagina</td>
    <td valign="top">Sidebar</td>
</tr>
</table>

hiermee trekt hij de onderkant van het menu en van de sidebar gewoon mee met de lengte van de inhoud van de pagina.

de valign="top" gebruik ik om ervoor te zorgen dat hij de tekst niet in het midden van de kolom uitlijnt maar gewoon aan de bovenkant.

Het is trouwens niet standaard om tabellen te gebruiken voor een website, normaal gezien wordt hier inderdaad DIV's voor gebruikt. Maar ik maak mijn website's altijd in tabellen. en sommige dingetjes zet ik in DIV's zoals een opgemaakte tekst.

Als je dit gedaan hebt, dan trekt hij wel de complete sidebar en het menu naar beneden.

Groeten,

Leroy

[Gast]

ja, maar... nu zijn ze met men voeten aan het spelen hé... xD

toen ik begon met een website te maken en een vraag had (http://www.pc-helpforum.be/f129/opgelost-menu-xhtml-en-css-11620/)

dan was het percies een schandaal dat ik tables gebruik. Dus ik heb dat maar snel afgeleerd. En nu zegt men dat ik het toch moet doen xD

[leroy]

klopt. Normaal gezien maak je website's met DIV's (Daar zijn DIV's voor gemaakt). Maar ik vindt het VRESELIJK werken. GA maar eens kijken naar een random website in de broncode.

Daar zie je de opmaak allemaal met Tabellen staan. (kijk bijvoorbeeld maar naar de website van Pc-helpforum zelf.

of andere website's.

Ik vindt tabellen gewoon veel handiger en makkelijker werken als DIV's...

voor jouw probleem zou je ook wat anders kunnen gebruiken mocht je bij de DIV's willen blijven....

je zet om het menu, de inhoud en de sidebar nog een losse DIV (mits die er al staat) geeft daar een border aan mee.

nu staat er dus om het menu, de inhoud en de sidebar een lijntje.

Nu laat je bij het menu de border leeg. En zo ook bij je sidebar.

Bij je inhoud geeft je alleen de border-left en de border-right mee..

nu zie je dus dat tussen het menu en de inhoud.. en tussen de sidebar en de inhoud ook een lijntje staat.

en nu is de visuele hoogte van de sidebar en het menu ook gewoon volledig tot beneden getrokken.

en je zet de hoogte van het menudivje en de sidebar div op AUTO:

<div height="auto"></div>

zo wordt de hoogte van de div van het menu gewoon de hoogte van het menu (maar omdat dit niet zichtbaar is laat hij ook geen streepje zien

en zo ook bij de sidebar

Hoop dat je hier dan wat aan hebt.

Groeten,

Leroy