Bootstrap полная высота с липким нижним колонтитулом

У меня возникла небольшая проблема с бутстрапом, пытаясь покрыть всю высоту окна браузера, когда содержимого недостаточно. Я использую bootstrap внутри Orchard CMS, если это имеет какое-либо значение.Bootstrap полная высота с липким нижним колонтитулом

Проблему можно увидеть в картине здесь

Gutters bleeding into content

Структура страницы довольно простой:

<body style="background-color: #b0a2b0;"> 
<div id="layout-wrapper" style="margin: 0px auto -75px; padding: 0px 0px 75px;"> 
    <div class="container"> 
     .... stuff ... 
    </div> 
    <div class="container"> 
     ... other stuff 
    </div> 
</div> 
<div id="footer" style="height: 75px;"> 
    <div class="container"> 
    </div> 
</div> 
</body>

html, body и #layout-wrapper все имеют высоту устанавливается на 100%. Моя умная идея до сих пор заключалась в том, чтобы добавить дополнительный контейнер и соответствующим образом изменить его размер. Проблема в том, что мне нужно обратить внимание, когда окно изменится, а также если что-то на странице скрывается или отображается (так как это изменит доступную высоту).

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

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

Любые идеи?

источник

2014-06-03 Tallmaris

скрипка, пожалуйста ... – KyleMit

Вы должны действительно полностью увеличить высоту CSS. Есть сотни ответов. –

Да, я пробовал другие вещи, и в самом деле div '# layout-wrapper' расширяется до 100% высоты, но внутри него контейнеры не заполняют все доступное пространство. – Tallmaris

Спасибо всем, в основном за подсказку в правильном направлении поиска. Я нашел этот замечательный ответ на SO: CSS 100% height with padding/margin

В основном я дал мой вертикальный Наполнитель следующий CSS:

.verticalFiller { 
    display:block; 
    position:absolute; 
    height:100%; 
    bottom:0; 
    top:0; 
    left:0; 
    right:0; 
    z-index: -9999; 
}

Это сделает наполнитель полный рост ДИВ сидит позади всех .container с и показ необходимое белый часть.

источник

2014-06-04 09:39:24 Tallmaris

Эта сортировка работает, но поскольку содержимое находится за '.container', вы не можете нажимать на что-либо в нем (элементы формы, кнопки ...) – imns

Цель этого div - предоставить дополнительный белый фон на нижней части страницы между контентом и нижним колонтитулом (посмотрите изображение в сообщении). У него не должно быть контента. – Tallmaris

-2

Ну, как мы исправили эту проблему с JS. На нашем макете мы всегда включаем небольшой JS-код, который выполняет проверку, когда документ готов, а также привязан к событию изменения размера экрана.

В принципе, у нас есть контейнер, в котором мы выводим наш контент. Итак, мы проверяем высоту экрана пользователя с помощью

$(window).height();

и если этот размер меньше содержания + нижний колонтитул + заголовок; мы должны изменить размер контейнера таким образом: container.hegiht = screen.height - (footer.height + header.height)

Только для того, чтобы сделать его более мягким, мы применяем анимацию.

Проверьте код (JS):

function(container){ 
    var footer = $('.footer').height(); 
    var header = $('.navbar').outerHeight() + parseInt($('.navbar').css('margin-bottom')); 
    var screenHeight = $(window).height(); 
    if (! (screenHeight < ((container.outerHeight() + parseInt(container.css('margin-bottom'))) + footer + header))) { 
    // If it is, resize container 
    // container.height(screenHeight - (header + footer)); 
    var height = screenHeight - (header + footer); 
    container.animate({height: height }, 500); 
    } 
}

Это путь мы делаем, и до сих пор идет очень хорошо.

Просто не забудьте вызвать эту функцию в DOM - Готово и при изменении размера окна.

Надеюсь, это поможет!

источник

2014-06-03 16:23:56 avcajaraville

Существует так много способов сделать это в CSS, что использование JavaScript полностью неверно. –

Да, забыл упомянуть, что у нас уже есть решение JS, но этого недостаточно. Не забудьте также применить его, когда элементы на странице отображаются и скрываются, так как это изменяет высоту div. – Tallmaris

Для чистого решения CSS: сделайте положение нижнего колонтитула абсолютным, значение top установлено равным 100%, а маржа равна отрицательной высоте, поэтому на странице отображается точно height над нижней частью страницы. Я также считаю, что это помогает сжать тело.

body { 
    height:95%; 
} 

.footer { 
    position:absolute; 
    top:100%; 
    height:20px; 
    margin-top:-20px; 
    width:100%; 
}

demo

EDIT:

Просто понял, что вы хотите, чтобы колонтитулы двигаться, если страница не является полной длины.На моем сайте я просто убедился, что цвет фона согласован, поэтому нижний колонтитул не выглядел неуместным, иначе я думаю, что решение JS было бы лучше в состоянии принять во внимание эту вещь.

источник

2014-06-03 16:25:30 serakfalcon

Bootstrap полная высота с липким нижним колонтитулом

ответ

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