Создание div в нижней части страницы

Я пытаюсь создать <div>, который всегда распространяется на нижнюю часть страницы. Здесь обсуждалась проблема similar: https://stackoverflow.com/questions/16821721/extend-div-to-bottom-of-page Однако, я хочу, чтобы только использовал сам div. Мой подход был следующий Javascript код (который будет выполняться каждый раз при изменении размера окна):Создание div в нижней части страницы

var total_height = $(window).height(); 
var container = $("div#container:first")[0]; 

var rect = container.getBoundingClientRect(); 

var remaining_height = total_height - rect.top; 

container.style.height = "" + remaining_height + "px";

Проблема заключается в том, что высота не принимает отступы/поля во внимание, так что ДИВ немного слишком большой , Я хотел бы установить высоту таким образом, чтобы offsetHeight был равен remaining_height, но я не уверен, как я могу добиться эффекта ... Любые идеи?

источник

2014-02-05 hfhc2

'#container: first' подразумевает, что у вас несколько элементов' ID' с тем же идентификационным именем **, что неверно ** –

возможно '#container div: first'?! – mehdi

http://api.jquery.com/outerheight/ как в '.outerHeight (true)'? – loveNoHate

Вы можете сделать это в простом HTML & CSS, имитируя нужный #container фон ... на самом деле установить его в к BODY элемента:

LIVE DEMO

Или с JS/JQuery:

LIVE DEMO

var windowHeight = $(window).height(); 
var $cont = $('#container'); // or use #containerParent if you have paddings 
var contTop = $cont[0].getBoundingClientRect().top; 
$cont.height(windowHeight - contTop);

, если вы не хотите иметь оболочку, и вы хотите применить к Прокладки #container
чем пойти на это:

LIVE DEMO

var windowHeight = $(window).height(); 
var $cont = $('#container'); 
var contH = $cont.outerHeight(true) - $cont.height(); // paddings, borders... 
var contT = $cont[0].getBoundingClientRect().top; 
$cont.height(windowHeight - contT - contH);

источник

2014-02-05 22:24:19

Вы меня не понимаете ... Добавьте 'padding: 10px;' в свой '# container' в css и вы увидит проблему ... – hfhc2

@ hfhc2 оберните ваш # контейнер в родительский элемент и примените мой код к этому элементу. Это просто –

@ hfhc2. Я ясно показал вам в демо, что единственные элементы с заполнением - это контейнеры содержимого. .centered. –

offsetHeight только значение, которое вы получить, когда вы добавляете высоту элемента в его свойства padding-top и padding-bottom, а также значения границ.

Так вы не можете просто вычесть верхние и нижние значения прокладки и значения нижнего/верхнего значения границы из значения left_height, чтобы получить высоту после?

источник

2014-02-05 22:51:22 Pineda

Опять же, если вы можете заставить это работать http://jsbin.com/sodu/3/edit, я все уши. Но похоже, что это не проблема с заполнением ... – hfhc2

В вашем вопросе, вы сказали, что вы хотели расширить <div> в нижнюю части страницы, но ваши расчеты предполагают использование $(window).height();, который возвращает высоту браузера видового (source).

Хотя работа с параметрами видового экрана может работать в некоторых случаях, может произойти сбой, например, если вы перезагрузите страницу, когда область просмотра не находится в верхней части документа.

При этом во внимание, вот код, который я использовал:

$(function() { 

    //get the height of the document 
    var docHeight = $(document).height(); 
    var extended = $("#extended"); 
    //offset.top gets the top position related to the document, using border-box. 
    var top = extended.offset().top; 
    //get the margin, if any. 
    var marginBottom = parseInt(extended.css("margin-bottom"), 10); 
    //set the height so that the bottom margin (or the element) is on the bottom. 
    extended.outerHeight(docHeight - top - marginBottom); 

});

LIVE DEMO

Это работает, если элемент имеет отступы, границы и/или маржу.

источник

2014-02-06 00:47:56 elas

Создание div в нижней части страницы

ответ

Смежные вопросы