Footer met absolute wrapper

**Rick Leijten** · 10-01-2011, 10:52

Dag Allen,

Ik ben een beetje ten einde raad met me css/html kennis. De bedoeling is dat de footer div onderaan de pagina komt (maar gewoon onder de wrapper komt) en dus niet onderaan de browser.

Omdat de wrapper geen height heeft (ik kan enkel dus de 100% meegeven maar dan rekent ie alleen het beeldscherm height), is het dus lastig om te bepalen vanaf wanneer de footer moet beginnen.

URL: http://www.visueelontwerper.nl/index.html

Nu is het zo dat de footer fixed is en dus meegroeit (ofja hij blijft plakken op die browser-spot). Wanneer ik de footer een absolute positionering geef blijft ie dus onderaan staan en als je naar beneden scrollt houd ie zijn positie op de website.

Hoe moet ik dit oplossen? Ik zit met 1 pre. de Wrapper moet een relatieve positie krijgen want de inhoud moet absolute gepositioneerd worden dmv een stylesheet switcher die later komt.

Groetjes

**Alexander Lambrechts** · 10-01-2011, 15:18

Dit is dus een voorgemaakte layout of dergelijke ? Ik heb vanavond wel eventjes tijd om je iets goeds en duidelijk ineen te steken.

**Rick Leijten** · 12-01-2011, 08:44

Dag Alex,

Dit is een opbouw. Het grafisch ontwerp + precieze indeling moet nog komen maar er is al wel vast gesteld dat er gebruik gemaakt gaat worden van een absolute positionering.

Dit als reden ivm een stylesheet switcher die de opbouw per stylesheet kan aanpassen (functionaliteit).

**Rory K.** · 12-01-2011, 09:21

HTML code:

Code:

<html>
	<body>
		<div class="wrapper">
			Je andere divs en content hier...
			<div class="push"></div>
		</div>
		<div class="footer">
			Je footer tekst hier.
		</div>
	</body>
</html>

CSS code:
De bottom margin van de wrapper moet dezelfde hoogte zijn als de footer & push div

Code:

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

.wrapper {
	position : relative;
	margin: 0 auto -100px;
	width : 980px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

.footer, .push {
	height: 100px;
	width : 980px;
}

.footer {
	hier de opmaak van je footer
}

**Rick Leijten** · 12-01-2011, 09:45

Netjes Rory,

Enkel nu plakt ie dus wel extra height aan de browser (ook als de content niet langer is dan de browser). Ik denk dat het niet anders kan?

**Rory K.** · 12-01-2011, 09:56

Sorry was een - vergeten...

je moet bij je wrapper dit doen:

Code:

margin : 0 auto -100px;

Dus de hoogte van de footer/push in de -

**Raymond Nijland** · 12-01-2011, 10:17

Ik heb even wat voor je gemaakt hoe ik dat altijd doe, inclusief een position: relative wrapper

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>header</title>
<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }
    
    #container{
        width: 1000px;
        margin: 0 auto;
        border: 1px solid black;
        position: relative;
    }
        
        #content{
            padding: 10px;
            margin-bottom: 40px; /* Hoogte van de footer     height + padding  */
        }
    
    
        #footer{
            /* Hier moet een width: 100% maar zo kun je duidelijk zien dat de content niet onder de footer door loopt */ 
            height: 20px;
            padding: 10px;
            
            position: absolute;
            bottom: 0;
            
            background-color: #FF0;
        }
    
</style>
</head>

<body>
    <div id="container">
        <div id="content">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et sem sed elit scelerisque feugiat. Fusce mattis felis ut diam sodales a placerat enim lobortis. In hac habitasse platea dictumst. Integer id diam et lectus congue suscipit. Aliquam orci dui, auctor vulputate gravida sollicitudin, imperdiet vel elit. Aliquam facilisis vulputate velit, at tincidunt purus sagittis ac. Ut metus elit, adipiscing a accumsan nec, cursus eu nibh. Vestibulum eget dolor eget lorem gravida posuere. Pellentesque a ante nibh. Morbi nisi ante, laoreet at vehicula sit amet, varius non velit. Maecenas molestie accumsan ante, non ornare tortor facilisis nec. Morbi pretium viverra felis, a feugiat magna fermentum eu. Nunc sodales lacinia nunc sed volutpat. Donec massa purus, venenatis non gravida et, bibendum non enim. Sed eget quam in velit vestibulum hendrerit. Donec dui lectus, ultrices sit amet sollicitudin in, dignissim vitae risus. Nam vitae erat lorem. 
        </p>
        </div>

        <div id="footer">
            Copyright 2011
        </div>
    </div>
</body>
</html>

**Rick Leijten** · 12-01-2011, 11:09

Origineel gepost door Rory K.

Sorry was een - vergeten...

je moet bij je wrapper dit doen:

Code:

margin : 0 auto -100px;

Dus de hoogte van de footer/push in de -

Dag Rory,

Misschien kan je er even naar kijken : http://www.visueelontwerper.nl/website/footer.php

Ik heb hier jouw code en structuur gebruikt. De footer deed het tot ik de laatste div homepage3 toevoegde. Deze overlapt nu de footer.

**Rory K.** · 12-01-2011, 11:39

Omdat je met position absolute werkt rekt de div (wrapper) waar het binnen staat niet mee... (en dit zal je volgens mij altijd zo houden op welke manier dan ook of je moet met javascript de lengte uitrekenen en dat de wrapper die height krijgt als hij langer is dan 100% van het scherm)

Ik snap alleen niet waarom je met de absolute wilt werken? Je kan deze structuur toch simpel met float in elkaar zetten?

**Rick Leijten** · 12-01-2011, 11:52

Origineel gepost door Rory K.

Omdat je met position absolute werkt rekt de div (wrapper) waar het binnen staat niet mee... (en dit zal je volgens mij altijd zo houden op welke manier dan ook of je moet met javascript de lengte uitrekenen en dat de wrapper die height krijgt als hij langer is dan 100% van het scherm)

Ik snap alleen niet waarom je met de absolute wilt werken? Je kan deze structuur toch simpel met float in elkaar zetten?

De reden is omdat de structuur veranderd per stylesheet, er komen later 7 verschillende stylesheets/ontwerpen aan te hangen. Mij leek daarmee het handigst om met absolute positioneringen te werken.

Al moet ik zeggen dat ik steeds meer gefrustreerd raak over mijn keuze met absolute positionering.. Niet alleen het footer probleem maar ook meer. Internet Explorer heeft er het meest moeite mee.

**Alexander Lambrechts** · 13-01-2011, 08:47

dat gaat toch ook met float heeft toch niks te maken met de kleur, afbeeldingen en dergelijke ???

Footer met absolute wrapper