Bootstrap 3 столбца полной высоты: индивидуальное решение CSS

Введение:

Создание Полноразмерные макеты с помощью Twitter Bootstrap 3 могут оказаться сложной задачей. Хотя собственные классы Bootstrap не поддерживают эту функцию, этого эффекта можно добиться с помощью специального CSS.

Пользовательский подход CSS:

1. Настройка 100% высота:
   Установите высоту элементов тела, контейнера и строки на 100 %, чтобы они охватывали всю высота области просмотра.
2. Отображение в виде таблицы:
   Преобразуйте элемент контейнера в таблицу с помощью display: table. Это позволяет упорядочить содержимое контейнера в табличной структуре.
3. Плавающая ячейка:
   Добавьте в столбец навигации собственный класс, например no-float. Установите для этого класса значения display: table-cell и float: none. Это предотвратит плавание столбца навигации и позволит ему вертикально выровняться по столбцу содержимого.

Разметка:

Header

    

        
Navigation
        
Content
    

CSS:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

Преимущества и особенности:

• Это пользовательское решение CSS обеспечивает полноразмерный макет, совместимый с Bootstrap 3.
• Соотношение навигации и контента 1:3 можно отрегулировать, изменив ширину столбцов в CSS.
• Однако важно используйте собственный класс (например, no-float) вместо изменения собственных классов столбцов Bootstrap, чтобы избежать конфликта.