Как заставить div растягиваться до фиксированного нижнего колонтитула

Ответ 1

Столбцы равной высоты

В некотором роде сложная часть - это не фиксированный верхний и нижний колонтитулы, или высота 100%; сложная часть - столбцы с равной высотой. Часто лучше подделывать столбцы с одинаковой высотой (например, добавление серо-зеленого фонового изображения в родительский контейнер). Обычно это позволяет сделать код более простым, более гибким и более стабильным по сравнению с истинными столбцами с одинаковой высотой. Если макет для этого веб-сайта окажется слишком громоздким, попробуйте подделать столбцы с равной высотой вместо этого (как показано в этой демонстрации), и посмотрите, поможет ли этот макет больше управляемым.

С учетом сказанного основные параметры для столбцов с равной высотой:

• Таблицы HTML
• таблицы CSS
• CSS3 flexbox
• сетки CSS3
• JavaScript или jQuery

Здесь JSFiddle demo с истинными столбцами с одинаковой высотой, используя таблицы CSS. Левый столбец имеет очень высокий контент, а в правом столбце - короткий контент. Демо протестировано отлично в IE10, Firefox, Chrome, Safari и Opera; однако это может работать только для относительно простых макетов.

Здесь аналогичная демонстрация с использованием таблиц HTML, в случае необходимости поддержки IE8.

Подделка столбцов с одинаковой высотой

Здесь другое демо, которое подделывает столбцы с равной высотой, добавляя 2-цветное фоновое изображение. Это демо также отлично зарекомендовало себя в IE10, Firefox, Chrome, Safari и Opera; однако, в отличие от предыдущих, гораздо более вероятно поддержка сложных макетов страниц.

HTML

<div id="header">...</div>
<div id="content" class="clearfix">
    <div class="column1">...</div>
    <div class="column2">...</div>
</div>
<div id="footer">...</div>

CSS

html, body {
    height: 100%;
    ...
}
#header {
    position: fixed;
    top: 0;
    height: 120px;
    ...
}
#footer {
    position: fixed;
    bottom: 0;
    height: 60px;
    ...
}
#content {
    min-height: 100%;
    padding: 120px 0 60px 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    background: url(some-two-color-background.png) repeat-y 53.6% top;
    ...
}
#content .column1 {
    float: left;
    width: 250px;
}
#content .column2 {
    float: left;
    width: 350px;
}

Примечание: видимые ширины столбцов для фонового изображения управляются установкой свойства background-position. Это позволяет подделывать два столбца любой явной ширины (px или%) с использованием одного и того же общего фонового изображения. Кроме того, для упрощения CSS можно использовать настраиваемое фоновое изображение с точными размерами столбцов.

Ответ 2

Я думаю, что вы после чего-то вроде этого? jsFiddle

Я сделал это немного легче для себя, только скопировав разметку, которая мне нужна с вашего сайта, class 's, id, и используемые элементы точно такие же, как на вашем сайте, что должно сделать это довольно легко для вас реализовать это решение на своем веб-сайте.

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

Edit

Я понял, что вы, вероятно, хотите, чтобы ваш заголовок также был исправлен (как это кажется на вашем текущем веб-сайте), здесь версия с фиксированным заголовком. jsFiddle.

Edit2

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

HTML

<header></header>
<div id="container">
    <section class="results"></section>
    <section class="main"></section>
</div>
<footer></footer>

CSS

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
header {
    position: fixed;
    top: 0px;
    height: 60px;
    width: 100%;
    background-color: #FFF;
}
#container {
    height: 100%;
    overflow:auto;
    padding-top: 60px;
    padding-bottom: 60px;
    display: table;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
footer {
    position: fixed;
    bottom: 0px;
    height: 60px;
    background-color: #333333;
    width: 100%;
}
.main {
    display: table-cell;
    background-color: #008000;
}
.results {
    display: table-cell;
    background-color: #EFEFEF;
    width: 383px;
}
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}

Ответ 3

Я думаю, что ваша проблема сидит здесь: #found-results { height: 100%px; ...

... и дальше, я думаю, вы тоже должны добавить это:

html, body {height: 100%}

Ответ 4

вы можете установить высоту с помощью jquery в соответствии с высотой боковой панели после загрузки страницы

$(document).ready(function(){
    $('#main').height($('#sidebar').height());
});

Ответ 5

Вы можете использовать Jquery для достижения этого.

$(document).ready(function() {
    var window_height = $(window).height();
    var footer_h = $("#footer").height();
    var container_height = window_height - footer_h ;
    $("#container").hide();
    $("#container").css('min-height', container_height + "px");
    $("#container").show();
});