2014-11-05 1 views
1

У меня проблема при попытке сделать нижний колонтитул с использованием flexbox. Я хочу, чтобы нижний колонтитул отображался в нижней части веб-страницы, используя align-items: flex-end. Я нашел ответ на этом сайте, говоря, что мне нужно добавить 100% высоты в мой код, но когда я делаю это, он добавляет больше высоты экрана и делает это, поэтому мне нужно прокрутить, чтобы увидеть нижний колонтитул. Вот основа того, что я делаю (я сделал весь колонтитул зеленый, так что я мог видеть, что происходит):Footer using Flexbox

http://jsfiddle.net/kk4jec81/2/

Заранее спасибо за вашу помощь!

+0

Вы хотите, чтобы нижний колонтитул оставался на дне? Если это так, вы хотите, чтобы контент отталкивал его, когда страница заполняется (требуется прокрутить вниз, чтобы увидеть нижний колонтитул), или вы хотите, чтобы нижний колонтитул ВСЕГДА застрял внизу (чтобы не было видно сколько контента у вас на странице)? –

+0

Я только что играл с твоим созданием ... и пока я не думаю, что это то, что ты ищешь, я думаю, что может быть что-то, что тебе поможет. [обновленная скрипка] (http://jsfiddle.net/fishgraphics/kk4jec81/3/) Позвольте мне точно знать, что вы ищете, и я посмотрю, что я могу сделать. –

ответ

1

Я знаю, что это было некоторое время, так как был задан вопрос, но вот способ ее решить: http://jsfiddle.net/kk4jec81/9/

Я добавил некоторые комментарии по CSS, но то, что я сделал это body {display:flex;flex-flow:column;}, то я удалил 100% нижний колонтитул и, наконец, .menuContainer {margin-top:auto;}.

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