Абсолютна позиция на footer


1
Здравейте, на няколко пъти в курсовете беше споменато, че позицията на footer може да бъде зададена чрез js, който дава разделителната способност на клиента, но това не е много правилно. Кой е правилния начин?



Отговори



2
Според мен правилният начин е да имаш "clear" на div-a който ти държи съдържанието на сайта и след това си слагаш footera. Така си осидуряваш footer-а да е след последния най-голям(дълъг) елемент от съдържанието т.е. ако имаш изместени(float) елементи, той ще си отиде най-отдолу и няма да се намърда някъде между съдържанието на сайта. Това осигурява също и еднакъв изглед на всички потребители.
EDIT: Ето какво ми хурмна, да се направи чрез JS и да се получи същия ефект: Трябва ти височината на най-големия елемент. Пак ако си сложиш съдържанието в един общ div - отлично, ако ли не трябва да направиш цикъл през всичките елементи в страницата ти. Иначе ако е в общ таг пишеш: var width = document.getElementById('foo').offsetHeight и ти излиза височината на елемента. Можеш да направиш и с "offsetWidth", така чрез делене на две ширината и чрез височината можеш абсолютно да позиционираш footer-a.
Според мен няма смисъл от изчисления от страна на клиента при положение, че CSS може да го направи.

от Vali0 (1139 точки)


0
Благодаря много!

от angie_bg (214 точки)


0

Може да се направи и само с HTML и CSS, а с JS става с 2 функции, едната определя височината на прозореца и подава стойността на другата, която пък от своя страна определя дали има нужда футърът да придобие position: relative и с колко да бъде изместен спрямо top. Втората функция прави същите сметки и при resize на заредената страница.

Фунцкията се вика автоматично при зареждане на прозореца (window.onload) и при промяна на размера му (window.onresize).

function getWindowHeight() {

var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight  = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'relative';
footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
 
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
 
Дано ти е било от полза, макар според мен да е излишно сложно, предвид, че може да се направи нещо подобно само с CSS.

от topalkata (6442 точки)