[CSS] Content minimale hoogte

[Mike2k]

Hi all,

Ik zit met de volgende uitdaging.
Ben mijn website aan het verbouwen (nieuw uiterlijk + functionaliteiten) en ik zit met een design probleem waar ik niet uitkom

Ik heb al een aantal dingen geprobeerd zoals

• Een wrapper div
• Floats
• Absolute positioning
• Tabellen

Maar het komt er nog niet uit zoals ik wil.
Dit is de website : http://dev.phison.nl/mike2k/
Die mooie kleurtjes zijn er omdat ik al laatste dit voorbeeld heb geprobeerd: http://matthewjamestaylor...ight-columns-2-column.htm

Wat ik zou willen:

Ik wil graag een fixed header (die is goed, beetje kaal, maar verder goed)
Dan gecentreerde content met 2 kolommen die,minimaal de hoogte van de viewport innemen (beide evenhoog ongeacht de content)
Daaronder de footer die altijd onderaan de viewport staat.

Heb de footer in orde gekregen met position: absolute en bottom: 0px maar dan scrollt de content erachter door...

Volgens mij ben ik er redelijk dicht bij want zoals het nu staat is het aardig goed alleen zou ik nog willen dat de content (dat roze en gele vlak) de minimaal de hoogte heeft van de viewport min de header en footer en, als er meer content is, dat deze uiteraard mee uitrekt.

Ik heb ook min-height op de content geprobeerd maar dat werktte ook niet...

Kan iemand me op weg helpen ?

[Verwijderd]

Bij mij staat de footer niet onderaan (Firefox 3.6).

De illusie wekken dat je content-vlak helemaal doorloopt is in het algemeen vrij eenvoudig te doen met faux columns.

[Zoefff]

Dan wil je de footer fixed positioneren in plaats van absoluut. Neem de HTML en CSS van het eerste voorbeeld wat je noemt (mike2k), en voeg daar het volgende aan toe:

Cascading Stylesheet:

#footer {
    position: fixed;
    bottom: 0;
    background: #fff;
}

Dan heb je de basis van wat je wilt. Dan zal je de boel nog moeten centreren, maar dat kan je natuurlijk eenvoudig doen door bijvoorbeeld de hele body te centreren:

Cascading Stylesheet:

body {
    width: 40em;
    margin: 0 auto;
}

of door hetzelfde te doen op een of meerdere van de contentvlakken.

Succes

[curry684]

Mike2k schreef op dinsdag 13 juli 2010 @ 23:08:
Die mooie kleurtjes zijn er omdat ik al laatste dit voorbeeld heb geprobeerd: http://matthewjamestaylor...ight-columns-2-column.htm

Als je deze layout wil gebruiken, die gebruik maakt van de 'float everything' manier van layouten, kun je net zo goed een table gebruiken - net zo grote semantische onzin maar minder overhead van overdadig complexe HTML en CSS.

De oplossing voor dit soort dingen zit in faux columns als gezegd, die 200 bytes aan cacheable PNG background wil je echt een stuk liever dan de paar kilobytes aan HTML en CSS die je nu verspild.

[mcDavid]

Fixed header en footer, zodat iemand op een netbook gegarandeerd geen content in beeld heeft?

[Mike2k]

Ben er nog niet aan toegekomen maar volgens mij zijn de faux columns wel de manier voor mij...

Ik zit dan nog wel met het volgende:

Ik wil graag dat de footer altijd onderaan de pagina (viewport) staat...

Dus ook als je een grotere resolutie hebt, wil ik graag dat de content zich helemaal uitrekt tot 154px vanaf de onderkant.

Dit is te regelen met:

• position: absolute
• bottom: 154px

Maar als ik dat gebruik, dan kan krijg ik de content niet meer netjes in het midden...
Heb jullie een idee?

[ Voor 69% gewijzigd door Mike2k op 14-07-2010 11:31 ]

[Zoefff]

Volgens mij heb je mijn reactie niet gelezen? Die beantwoord je vraag

[amahusu]

Mike2k schreef op woensdag 14 juli 2010 @ 11:28:
Ben er nog niet aan toegekomen maar volgens mij zijn de faux columns wel de manier voor mij...

Ik zit dan nog wel met het volgende:

Ik wil graag dat de footer altijd onderaan de pagina (viewport) staat...

Dus ook als je een grotere resolutie hebt, wil ik graag dat de content zich helemaal uitrekt tot 154px vanaf de onderkant.

Dit is te regelen met:

• position: absolute
• bottom: 154px

Maar als ik dat gebruik, dan kan krijg ik de content niet meer netjes in het midden...
Heb jullie een idee?

wat jij wilt is een Sticky footer

[Mike2k]

Ja, dat heb ik ook al voor elkaar gekregen, maar wat ik graag wil is dat de content altijd 100% is, zelfs als er te weinig tekst is...normaal zijn div's die floaten alleen maar zo lang als nodig is...

Ik wil dat de layout minimaal de hele viewport beslaat en langer als dat nodig is...

[PeterSelie]

Wat jij wil kan je bereiken met behulp van Faux Columns.

[ Voor 17% gewijzigd door PeterSelie op 14-07-2010 13:04 ]

[MueR]

Je leest niet echt, of wel? De suggestie voor faux columns negeer je, de fixed footer doe je ook niets mee. Als je zit te wachten tot iemand een compleet werkende versie voor je post, heb je pech, dat doen we hier niet. Met de tips die tot nu toe zijn gegeven krijg je dit prima voor elkaar. Dus ik zou zeggen: ga aan het werk

[Mike2k]

MueR schreef op woensdag 14 juli 2010 @ 13:05:
Je leest niet echt, of wel? De suggestie voor faux columns negeer je, de fixed footer doe je ook niets mee. Als je zit te wachten tot iemand een compleet werkende versie voor je post, heb je pech, dat doen we hier niet. Met de tips die tot nu toe zijn gegeven krijg je dit prima voor elkaar. Dus ik zou zeggen: ga aan het werk

Was ook aan het werk, vandaar dat ik het niet kon doen
Heb wel wat te vroeg gepraat...excuus daarvoor...

Maarrrr ik heb zojuis de fixed footer gedaan en die werkt...ding blijft nu onderaan de pagina zonder dat de content er achter doorloopt....