Как изменить размер div на размер браузера

Question

Правильно, поэтому вместо того, чтобы использовать липкий нижний колонтитул, я решил создать функцию jQuery, которая изменит размер моего div #mainContent, чтобы нижний колонтитул мог вписаться в красиво.

В основном то, что я пытаюсь сделать, это

#mainContent { height: 100% - 40px; } 

Где

#footer { height:40px; } 

Я придумал

$(window).resize(function() { 
    var mainContent = $('#mainContent').innerHeight() - 40; 
    $('#mainContent').css("height", mainContent); 
}); 

, но каждый раз, когда я изменить размер, это просто укорачивает # mainContent by 40px вместо того, чтобы перерабатывать то, что должно быть #mainContent, тогда -40px;

$(window).resize(function() { 
    var mainContent = $(document).height() - 80; 
    $('#mainContent').css("height", mainContent); 
}); 

Я чувствую, что у меня что-то не хватает.

Пожалуйста, помогите.

Редактировать: верхний и нижний колонтитулы являются статическими (то есть 40 пикселей каждый), я хотел бы изменить размер mainContent, не имея потока нижнего колонтитула (потому что липкий нижний колонтитул использует margin-top: -40px;). Я все еще хочу, чтобы нижний колонтитул находился внизу экрана. Edit2: добавлена ​​вторая попытка.

Answer 1

Я в только элементах с помощью вашей высоту экрана являются MainContent DIV и нижние колонтитулы, и вы решили контролировать футер через JavaScript + функцию JQuery в реагирующих образом используйте окно или высоту документа для того, чтобы вычислить высоту DIV контента, как так:

var mainContent = $(window).height() -40; 
var mainContent = $(document).height() -40; 

пример, чтобы показать, что работает, как вам требуется.

Я закодировал для вас простую разметку, но достаточно, чтобы показать вам, что она должна работать и на вас.

Это зависит от вас, чтобы позаботиться о переуступке/рассмотрении любых возможных вертикальных полей, которые могут быть разрушены или что-то еще, чтобы получить правильную цифру для применения в функции.

Я применил объявление минимальной высоты для правила mainContent только для моего примера. Конечно вам не нужно, что у всех, а также те ужасные цвета я использовал :)

positionFooter функция не должна быть настолько расширен. Я написал, что путь для дидактической цели

Вот код:

$(function() { 
    function positionFooter() { 
     var wh = $(window).height(); 
     var wc = wh - 80; 
     $('#mch').text(wc); 
     $("#mainContent").height(wc); 
    } 
    $(window).resize(positionFooter); 
    positionFooter(); 
}); 

Возьмите заботу о идентификаторах, селекторов и т.д., когда вы распространить это решение на свой собственный код.

В любом случае, Я не могу представить, почему вы не хотите применять полное решение CSS вместо использования javascript. Но хорошо. Это ваш вызов. Вот the fiddle. Наслаждайтесь!

Answer 2

Он продолжает сокращаться, потому что вы жестко закодировали значение пикселя для размера. Размер не будет расширяться/сокращаться из-за жесткого кодированного значения.

Если вы хотите получить полную высоту, вам нужно будет удалить значение px, установленное перед чтением высоты.

Answer 3

Просто укажите высоту и ширину своего div в %.

Проверьте, подходит ли оно для вас.

Answer 4

Я не уверен на 100%, это то, что вы ищете - похоже, что вы хотите, чтобы вы заполнили все окно, за исключением нижнего 40px, #mainContent. Если да, то это должно работать для вас:

Html:

<div id="mainContent">This is the main content</div> 
<div id="footer">This is the footer</div> 

CSS:

#mainContent { 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:40px; 
    background:#F0F0F0; 
    overflow:auto; 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    left:0; 
    right:0; 
    height:40px; 
    background:#FCC; 
} 

Рабочий пример: http://jsfiddle.net/nvNRY/1/

Edit: Если вы не хотите #mainContent действовать как кадр (т. с его собственной полосой прокрутки), то просто добавьте 40px дополнение к нижней части тега body. Не устанавливайте положение #mainContent и оно будет прислоняться к прокладке, тогда как #footer будет перекрывать прокладку.

Edit 2: Пример с заголовком и показывая overflow:scroll это действие: http://jsfiddle.net/nvNRY/2/

Answer 5

сказал Как RaraituL, вы можете использовать липкий колонтитул.Затем, если вы действительно хотите, чтобы сделать вещи высоту 100%, вы можете сделать что-то вроде:

#mainContent { height: 100%; box-sizing:border-box; padding:0 0 40px;} 

Добавить во всех префиксов поставщика, и вы должны иметь правильное определение размеров. See here для получения дополнительной информации о box-sizing.

Answer 6

Вы можете использовать media query для загрузки другого файла css для определенного размера браузера.

@media (min-device-width: 640px) { ... } 

Это как этот http://mediaqueri.es/

Answer 7

Это должно сделать трюк DEMO

$(document).ready(function(){ 
    $(window).resize(function() { 
     var mainContent = $(window).height() - 80; 
     $('#mainContent').css("height", mainContent); 
    }); 
    var mainContent = $(window).height() - 80; 
    $('#mainContent').css("height", mainContent); 

}); 

Позвольте мне знать, если это не работает.