Med nyere kode som HTML5 og CSS3 så er nok mye av dette løst. Men siden vi i dag har mange brukere som bruker nettlesere som ikke støtter de nevnte standardene så hender det seg at man må ty til andre metoder.
Å gjøre et element 100% høyt på en nettside har alltid vært en utfordring da det ikke finnes noen standard for dette. Noen løser det med utrolig mange linjeskift for å være sikker på at siden fylles opp i høyden. Andre bruker tabeller, noen CSS og andre kreative metoder.
Her om dagen hadde jeg en kunde med nettopp dette problemet. Designet fra designer sa at feltet som skulle inneholde en artikkel skulle begynne et sted og gå helt ned til bunnen av nettleseren. Men kunden hadde ikke så mye innhold i alle sine artikler som lorem ipsum -teksen i designskissene og jeg satt med en skjerm med høyere oppløsning enn designet viste eksempler på.
Jeg kunne selvfølgelig løst det med CSS og brukt tid på å få det til å virke og se likt ut i ulike nettlesere. Men siden nettstedet allerede benyttet seg av jQuery så fantes det en raskere og enklere løsning.
Den enkleste løsningen kunne bli å sette en minstehøyde på innholds-DIVen. Men jeg tenkte jeg skulle fikse det med javascript og jQuery. Så her kommer et lite enkelt tips.
Slik ble scriptet
$(document).ready(function() {
var innhold = $("div#innhold").outerHeight(true); // Steg 1
var bokshoyde = $(document).height() - innhold - 44; // Steg 2
$("div#boksen").css("minHeight", bokshoyde); // Steg 3
});
- Steg 1: Finn høyden på DIVen over elementet som skal gå helt ned til bunnen
- Steg 2: *Kalkuler høyden på elementet for at det skal gå helt ned til bunnen
- Steg 3: Sett høyden på elementet
* Legg merke til at jeg tar høyden på nettleservinduet og trekker ifra høyden på elementet over og trekker ifra yttligere 44px. Årsaken til de 44px er at scriptet ikke helt klarer å ta hensyn til tykkelsen på kantlinje (border) og padding.
Se eksempel på hvor jeg har brukt skriptet her: eksempler.helgejohnsen.com/full-hoyde
Hvis man har kun ett element, så kan man gjøre slik:
$(document).ready(function() {
var bokshoyde = $(document).height();
$("div#boksen").css("minHeight", bokshoyde);
});
Nøkkelord: 100% høyde, full høyde, html, javascript, jQuery, tips, Tumblr
