To <body> είναι ουσιαστικά άλλο ένα block level element, με τα θετικά και τα αρνητικά του. Ενίοτε αυτό μπορεί να μας προκαλέσει πρόβλημα, όπως μου συνέβη πρόσφατα.
Στο site που δουλεύω, έχω ρθυμίσει το html και το body να έχουν διαφορετικά (ημιδιαφανή) φόντα, ώστε συνδυαστικά να δίνουν το εφέ φόντου που θέλω (αφού τα CSS3 multiple backgrounds αργούν ακόμα…). Οι περισσότερες σελίδες του site έχουν μεγαλύτερο ύψος από το viewport του browser, ακόμα και σε μεγάλες αναλύσεις, οπότε δεν μου είχε τύχει περίπτωση να είναι το περιεχόμενο μικρότερο από το viewport, μέχρι που ασχολήθηκα με τα μηνύματα λάθους που εμφανίζονται αν κάτι πάει στραβά. Ο σχεδιασμός που αποφάσισα ήταν τέτοιος, που τα περισσότερα οδηγούσαν το body να έχει μικρότερο ύψος από το viewport, ακόμα και στο laptop μου που έχει ανάλυση μόλις 1280×800. Το αποτέλεσμα ήταν να “κόβεται” απότομα το φόντο του body και να φαίνεται άσχημο.
Η πρώτη μου σκέψη ήταν να δώσω ένα height:100% σε html και body. Το αποτέλεσμα ήταν να φτιάξει μεν στις περιπτώσεις που το ύψος του περιεχομένου ήταν μικρότερο από το viewport και να χαλάσει στις υπόλοιπες (που αποτελούσαν και την πλειοψηφία). Η δεύτερη σκέψη μου ήταν να αλλάξω το height:100% με min-height:100%. Τίποτα, σαν να μην υπήρχε. Η τρίτη μου σκέψη ήταν να συμβουλευτώ τον παλιόφιλο γούγλη 
. Μετά από πολλαπλές αναζητήσεις κατέληξα ότι λύση δεν υπάρχει, τουλάχιστον χωρίς tables και χωρίς javascript, οπότε το πήρα απόφαση ότι θα χρειαζόταν να γράψω λίγη javascript για να λυθεί.
Αφού συμβουλεύτηκα τα καταπληκτικά compatibility tables του Peter-Paul Koch, και αφότου με παίδεψαν αρκετά οι παραξενιές του IE (πχ δεν ανταποκρινόταν στο document.body.style.height, αν είναι δυνατόν!) κατέληξα στην παρακάτω λύση, η οποία λειτουργεί σωστά και στους 4 major browsers που τη δοκίμασα (σε ΙΕ6 δεν έχω την ευκαιρία αυτή τη στιγμή μιας και είμαι “εκτός έδρας”, όποιος μπορέσει να το τεστάρει θα βοηθήσει και εμένα):
<script type="text/javascript">
function fixBodyHeight()
{
document.body.style.height = '';
if(window.innerHeight && document.body.offsetHeight < window.innerHeight)
document.body.style.height = window.innerHeight + 'px';
else if(!window.innerHeight && document.body.offsetHeight < document.body.parentNode.offsetHeight)
{ //IE did it again
document.body.style.height = document.body.parentNode.offsetHeight + 'px';
document.body.style.minHeight = document.body.parentNode.offsetHeight + 'px';
}
}
window.onload = window.onresize = fixBodyHeight;
</script>
ΥΓ: Χάριν απλότητας, το event handling γίνεται χωρίς listeners, όπως βλέπετε. Στη συγκεκριμένη περίπτωση, δεν χρειαζόταν να το κάνω με listeners, μιας και δεν πρόκειται να χρειαστώ τα ίδια events για παραπάνω λειτουργίες, ένα απλό μήνυμα σφάλματος είναι, nothing fancy. Προφανώς αν στη σελίδα σας έχετε παραπάνω από μια λειτουργίες για τα events αυτά, θα χρειαστεί να τροποποιήσετε την τελευταία γραμμή κατάλληλα. Το πως θα το κάνετε αυτό είναι πέρα από τους σκοπούς αυτού του blog post.
ΥΓ2: Ναι συμφωνώ ότι θα έπρεπε να είναι πιο απλο, και θέλω να πιστεύω ότι εγώ “πήγα Θεσ/νίκη μέσω Καλαμάτας” και όχι ότι όντως χρειάζεται τόσες γραμμές. Αν κάποιος σκεφτεί κάτι καλύτερο (και cross-browser), είναι κάτι παραπάνω από ευπρόσδεκτο.
ΥΓ3: Σας λείπει το firebug όταν κάνετε debugging σε browsers != Firefox? Get firebug lite!! Sorry για το άσχετο, αλλά ενθουσιάστηκα τόσο που το ανακάλυψα που δεν μπορούσα να μην το μοιραστώ 
Πρόσφατα σχόλια