Содержание с 100% высотой в контейнере ремешка ботинка

I need help with css, html & bootstrap.

How I can get effects like this: Layout

  1. Заголовок = Boostrap navbar (50 пкс высотой)
  2. Контейнер = серый фон на всем содержании места и центра
  3. Левый столбец = меню - ширина 220 пкс
  4. Правый столбец = содержание с белым фоном и 100% высотой
  5. Нижняя сноска = липкая нижняя сноска (высота: 50 пкс)

Чтобы сосредоточиться я использую:

<div class="container">

but I have problem with 100% height content and sticky footer.

2
nl ja de
Необходимо сделать это: stackoverflow.com/questions/11677886/… Я поместил ответ ниже
добавлено автор 97ldave, источник

2 ответы

Необходимо поместить CSS и HTML здесь так, чтобы кто-либо мог предложить вас легко.

Для липкой нижней сноски необходимо установить ее позицию как абсолютная и устанавливать позицию главного отделения по родственнику.

как:

html, body {
    height: 100%;
    min-height: 100%;
}

.container { 
    min-height: 100%;
    height: 100%;
    position: relative;
}

.footer
{
    height: 20px; //according to your requirement
    position: absolute;
    bottom: 0px;
}
2
добавлено

You need to do something like this: Twitter Bootstrap: div in container with 100% height

html, body {
    height: 100%;
}

.container { 
    min-height: 100%;
    height: 100%;
}
1
добавлено
Спасибо, я попробую его
добавлено автор atubitu, источник
Хорошо. Я попробовал все. Я поместил конечный результат ниже: [jsfiddle.net/atubitu/eqmLW/8/] [1] [1]: jsfiddle.net/atubitu/eqmLW/8 К сожалению:1. нижняя сноска "псевдолипкая" и не сосредоточена. 2. Текст в содержании терпит внешнее отделение.
добавлено автор atubitu, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)