[CSS] Container over volledige hoogte, te hoog

[pderaaij]

Voor een nieuw project van mij heb ik een container die over de volledige hoogte moet doorlopen.

Dat doe ik door middel van deze code

Cascading Stylesheet:

html, body
{
    background: #2c682e url(images/background.png) repeat-x;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 12px;
    color: #6f6f6f;
    text-align: center;
    
    margin: 0;
    padding: 0;
    
    height: 100%;
}

#container
{
    width: 1024px;
    margin: 0 auto;
    height: 100%;
    min-height: 100%;   
    text-align: left;
}

#contentContainer
{
    width: 1016px;
    background: url(images/contentBackGround.png) repeat-y; 
    
    position: relative;
    height: 100%;
    min-height: 100%;
}

#content
{
    padding-left: 40px;
    padding-top: 20px;
    padding-right: 40px;
}

#menuContainer
{
    width: 953px;
    height: 27px;
    margin-left: 30px;
    background: url(images/menuBackground.png) repeat-x;    
}

#footer
{
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #ccc;
}

Het resultaat hiervan is te zien op http://studio.axysservice.nl/tuinen/

Zoals je ziet loopt de container nog een eind door naar beneden zodat er scrollbars verschijnen. Echter is dit gezien de content nergens voor nodig. Mijn vraag is hoe ik dit kan oplossen? Het lijkt me dat je niets aan de height percentage moet veranderen.

Ik heb wat voorbeelden bekeken van internet en andere sites, maar kan daar nou niet echt een duidelijke oplossing vinden.

Bij voorbaat dank voor jullie hulp.

[Verwijderd]

Dit komt doordat je #contentContainer als height 100% geeft. De hoogte van #topHeader wordt daarbij opgeteld, zodat het totaal meer dan 100% is.

Wat je wil lukt niet op deze manier. Google maar eens op Faux columns.

[ Voor 31% gewijzigd door Verwijderd op 11-10-2007 19:42 ]

[R2D2]

Kan wel, geef je footer maar eens een margin-top:- hoogte v/d footer; mee. Volgens mij moet dat zo even uit het blote hoofd gewoon prima werken (ben geen webdesigner maar een prutser die websites kan bouwen ). Faux columns is echt voor het doorlopen van de naast gelegen colomns.

[ Voor 19% gewijzigd door R2D2 op 12-10-2007 00:15 ]

[BtM909]

Reind schreef op vrijdag 12 oktober 2007 @ 00:14:
Kan wel, geef je footer maar eens een margin-top:- hoogte v/d footer; mee. Volgens mij moet dat zo even uit het blote hoofd gewoon prima werken (ben geen webdesigner maar een prutser die websites kan bouwen ). Faux columns is echt voor het doorlopen van de naast gelegen colomns.

Enige is dat dit niet mooi werkt als je content ineens wel weer langer blijkt te zijn

[MueR]

offtopic:
Krijg spontaan hoofdpijn van de felle kleuren

[pderaaij]

Dat van die footer werkt niet en ik heb even zitten kijken naar die faux columns, maar ik begrijp niet helemaal hoe ik dit volgens de poster zou moeten toepassen? Door een de kolom van de content in het background plaatje van de body toe te passen ofzo?

[foliant]

Als ik het goed begrijp wil je iets soortgelijks als:
link


In jouw situatie zou dat iets worden als:

Cascading Stylesheet:

html, body
{
    background: #2c682e url(images/background.png) repeat-x;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 12px;
    color: #6f6f6f;
    text-align: center; 
    margin: 0;
    padding: 0; 
    height: 100%;
}

#container
{
    width: 1024px;
    margin: 0 auto;
    height: 100%;
    min-height: 100%;   
    text-align: left;
}

#topHeader
{
    position: fixed;
        width: 1016px;
    height: 195px;
    background: url(images/topHeader.png) no-repeat;    
}

#contentContainer
{
    width: 1016px;
    background: url(images/contentBackGround.png) repeat-y; 
    height: 100%;
    min-height: 100%;
}

#content
{
    padding-left: 40px;
    padding-right: 40px;
        padding-top: 215px;
}

#menuContainer
{
        position: absolute;
        top: 195px;
        width: 953px;
    height: 27px;
    margin-left: 30px;
    background: url(images/menuBackground.png) repeat-x;    
}

#footer
{
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ccc;
}

(Snel gehackt m.b.v. FireBug, dus het kan vast nog veel beter!)


Helaas moet je dan wel je header plaatje aanpassen, i.e. achtergrondkleur meenemen, waardoor je minder flexibel wordt.

Ik vermoed trouwens dat het stuk eenvoudiger wordt, als je de structuur van je divjes aanpast.

[pderaaij]

Excuses voor de late reactie, maar ik was even een heerlijk weekendje in Antwerpen.

Ik ga even naar je code kijken, dank u zeer!