De PHPhulp kroeg
Div moet onderaan
Als de inhoud van de pagina korter is dan de hoogte van de browser, dan zou die footer onderaan de browser moeten plakken.
Dit was volgens mij te doen met bottom: 0p; en position: absolute;
Maar hier had ik het probleem als de tekst langer werd dan de hoogte van de browser, dan kwam die footer over de tekst van de inhoud te staan.
Dit laatste wil ik natuurlijk niet.
Hier voorbeeldje met mijn HTML en CSS: http://beta.yargo.eu:8080/
.footer>body {
blabla
}
Sorry, meer weet ik ook niet..
Het is dus de bedoeling dat die footer onderaan het scherm plakt net als de header het doet bovenaan..
Edit:
Dit is dezelfde oplossing zoals ik ze overal vindt, maar die heeft dus de vreemde neiging als de tekst langer wordt, dat dan die footer boven de tekst gaat zweven. Dit wil ik dus niet.
Edit:
Vreemd, net even getest op die site van Jan, daar doet ie het niet :-S
Wat doe ik dan verkeerd?
Wat doe ik dan verkeerd?
Gewijzigd op 01/01/1970 01:00:00 door Hipska BE
Lastige situatie, ik heb dat ooit eens een keer opgelost met Javascript. Ik had dynamisch de hoogte van de content-container omhoog gekrikt bij initialisatie en resizing. Stukje voorbeeld code, ik hoop dat je er iets mee kan, als ik dit zo terug zie denk ik... naja :P ik vind Javascript geen mooie oplossing but it did the trick!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function changeContentHeight() {
var pageHeight = 0;
if(self.innerWidth) {
pageHeight = self.innerHeight;
} else if(document.documentElement && document.documentElement.clientHeight) {
pageHeight = document.documentElement.clientHeight;
} else if(document.body) {
pageHeight = document.body.clientHeight;
} else return;
var contentHeight = pageHeight - (document.getElementById('header').offsetHeight + document.getElementById('hoofdmenu').offsetHeight + document.getElementById('footer').offsetHeight);
document.getElementById('content').style.minHeight = contentHeight + 'px';
// Check what browser
var details = navigator.userAgent;
if(details.indexOf("MSIE") != -1) {
var IE = details.substring(details.indexOf("MSIE") + 5, details.indexOf("MSIE") + 6);
if(IE == "6")
document.getElementById('content').style.height = contentHeight + 'px';
}
}
var pageHeight = 0;
if(self.innerWidth) {
pageHeight = self.innerHeight;
} else if(document.documentElement && document.documentElement.clientHeight) {
pageHeight = document.documentElement.clientHeight;
} else if(document.body) {
pageHeight = document.body.clientHeight;
} else return;
var contentHeight = pageHeight - (document.getElementById('header').offsetHeight + document.getElementById('hoofdmenu').offsetHeight + document.getElementById('footer').offsetHeight);
document.getElementById('content').style.minHeight = contentHeight + 'px';
// Check what browser
var details = navigator.userAgent;
if(details.indexOf("MSIE") != -1) {
var IE = details.substring(details.indexOf("MSIE") + 5, details.indexOf("MSIE") + 6);
if(IE == "6")
document.getElementById('content').style.height = contentHeight + 'px';
}
}
Deze functie koppelde ik dus aan het document ready event en resize event.
Quote:
Jan geeft zijn wrapper nog een padding-bottom van 32px mee. De footer schuift dus wel over die div heen, maar nooit over de tekst in die div ;-)Wat doe ik dan verkeerd?
@Patrick: zoals je zelf al zegt, een javascript oplossing is niet echt wat je wilt. Dat kan immers ook uitgeschakeld zijn en dan zit je weer met hetzelfde probleem...
Dit lijkt me ook redelijk onhandig, daar je ook niet altijd de hoogte daarvan kan weten.
Overigens lijkt me margin-bottom wel juister als je met borders e.d. werkt.
Hoe ik dit doe is het volgende. Ik maak een Div om de div van de content en footer heen. Deze geef ik verder geen waardes mee.
Dan zeg ik min-height: 300px ofzo en voor IE if FF ik weet het zo niet meer is het:
* html{
height:300px;
}
Dan zeg je bij de div footer margin-top: 10px; zodat hij altijd netjes 10px onder de content komt en klaar.
Let wel even op dat je nog ff mischien met position:absolute; moet werken.
dit is allemaal uit mijn hoofd kan zo niet bij mijn code hoe ik het precies heb gedaan!
De truc is dan dus om inderdaad je content div net zoveel padding aan de onderkant te geven als je footer hoog is, op die manier zal nooit de content zelf achter de footer schuiven.
Je kan toch moeilijk weten hoe hoog een footer div zal zijn?
Let op de hoeveelheid text erin, dit kan je zelf wel wat beperken, maar wat je niet kan beperken is de lettergroote, iedere user kan in zijn browser gewenste lettergrootte kiezen.
Zo kan een footerDiv bij iedereen andere grootte hebben.
Dat men de lettergrootte kan aanpassen is inderdaad wel een punt, maar of je daar nu rekening mee moet houden bij het dynamisch maken van je website? Dan kun je alle onderdelen wel dynamisch gaan maken en dat is lijkt me ook niet echt wenselijk. Een overflow:hidden lijkt me een betere oplossing.
Ik heb het op een beetje andere manier opgelost.
Die footer div heb ik hetzelfde eruit laten zien als die content en sidebar div's, zodat als de content niet het volledige scherm inneemt, je een gewone footer ziet met alle kanten een rand. Is de content langer, dan zie je de footer div onderaan plakken net als de header bovenaan plakt ;-)
Kan iemand dit testen in IE of hij het daar ook doet? (zelfde url)
Klik op hide div om een kleinere content te hebben.
Het mooiste resultaat heb je nu in Safari, ondersteuning voor firefox en IE komt later nog, maar ik wou nu even weten of die fix het deed in IE...
verder blijft zowel in opera als in IE, die footer gewoon onder de rest van de divjes. tis niet zo dat ie dus altijd op de bodem hangt...
ook nie als ik de div inklap
neem eens firefox of safari en je merkt wat ik bedoel.
Edit:
Kan je mij anders screenshot leveren van de ingeklapte div? Dan kan ik zelf wel oordelen of het volgens mij ok is ;-)
Gewijzigd op 01/01/1970 01:00:00 door Hipska BE
Ik kijk wel nog even hoe ik het oplos. Alvast bedankt ondertussen.