Twitter bootstrap 3 двух столбца полной высоты

Я пытаюсь создать двухстоечный макет full-height с загрузочным твитом. 3. Кажется, что twitter bootstrap 3 не поддерживает макеты полной высоты. Что я хочу сделать:

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

Если контент растет, навигация также должна расти.

  • Высота 100% для каждого родителя не работает, потому что есть случай, когда контент является одной строкой.
  • Позиция абсолютная кажется неправильной.
  • display: table и display:table-cell, но это не элегантно

HTML:

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

Есть ли способ сделать это со стандартными классами twitter bootstrap 3?

ОТВЕТЫ

Ответ 1

Edit: В Bootstrap 4 родные классы могут создавать столбцы полной высоты (DEMO), потому что они изменили их сетчатую систему на flexbox. (Читайте дальше для Bootstrap 3)

Собственные классы Bootstrap 3.0 не поддерживают макет, который вы описываете, однако мы можем интегрировать некоторые пользовательские CSS, которые используют css tables для достижения это.

Демо-версия Bootply/ Codepen

Разметка:

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

(Релевантно) CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

Вышеприведенный код достигнет столбцов полной высоты (из-за пользовательских свойств CSS-таблицы, которые мы добавили) и с помощью соотношение 1: 3 (Навигация: Контент) для средних экранов и выше - (из-за классов начальной загрузки: col-md-3 и col-md-9)

NB:

1). Чтобы не испортить собственные классы столбцов начальной загрузки, мы добавляем в эту разметку еще один класс, например no-float, и устанавливаем только display:table-cell и float:none в этом классе (как это указано в сами классы столбцов).

2) Если мы хотим использовать только код css-таблицы для определенной точки прерывания (скажем, ширину экрана и выше), но для мобильных экранов мы хотим по умолчанию вернуться к обычной загрузке чем мы можем обернуть наш пользовательский CSS внутри медиа-запроса, скажем:

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Демо версия Codepen

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

3) Если соотношение 1: 3 необходимо для всех ширины экрана - тогда, вероятно, лучше удалить классы бутстрапа col-md- * из разметки, потому что это не то, как они предназначены для.

Демо версия Codepen

Ответ 2

Вы можете достичь того, чего хотите, с трюком padding-bottom: 100%; margin-bottom: -100%;, вы можете увидеть в этот скрипт.

Я немного поменяю свой HTML, но вы можете добиться того же результата с помощью собственного HTML со следующим кодом

.col-md-9 {
    overflow: hidden;
}

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

Ответ 3

Чистое решение CSS

Рабочий скрипт

Только использование CSS2.1. Работа со всеми браузерами (IE8 +), без указания высоты или ширины.

Это означает, что если ваш заголовок внезапно увеличится дольше или вам нужно увеличить левую навигацию, вам не нужно исправлять что-либо в вашем CSS.

Полностью отзывчивый, простой и понятный и очень простой в управлении.

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

Объяснение: Контейнер div занимает 100% высоты тела, и он делится на 2 секции. Раздел заголовка будет располагаться до нужной высоты, а HeightTaker займет остальное. Как это достигается? путем размещения пустого элемента вдоль контейнера со 100% высоты (с использованием :before) и предоставления HeightTaker пустого элемента в конце с помощью правила clear (используя :after). этот элемент не может находиться в одной строке с плавающим элементом, поэтому он толкнул до конца. что составляет ровно 100% от документа.

С этим мы делаем span HeightTaker оставшуюся часть высоты контейнера, не указывая никакой конкретной высоты/поля.

внутри HeightTaker мы создаем нормальный плавающий макет (для достижения такого столбца, как дисплей) с незначительным изменением. У нас есть элемент Wrapper, необходимый для высоты 100%.

Update

Здесь демо с классами Bootstrap. (Я просто добавил один div в ваш макет)

Ответ 4

Я подумал о тонком изменении, которое не меняет поведение загрузки по умолчанию. И я могу использовать его только тогда, когда мне это нужно:

.table-container {
  display: table;
}

.table-container .table-row {
  height: 100%;
  display: table-row;
}

.table-container .table-row .table-col {
  display: table-cell;
  float: none;
  vertical-align: top;
}

поэтому я могу использовать его так:

<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
  </div>
</div>

Ответ 5

Насколько мне известно, вы можете использовать до 5 методов для этого:

  • Использование свойств таблицы/таблицы таблицы CSS или использования фактических таблиц.
  • Использование абсолютного позиционного элемента внутри обертки.
  • Использование свойства отображения Flexbox, но на сегодняшний день он по-прежнему имеет частичную поддержку
  • Имитировать полные высоты столбца, используя технику faux column.
  • Использование метода заполнения/запаса. См. пример.

Bootstrap: у меня нет большого опыта в этом, но я не думаю, что они предоставляют стили для этого.

.row
{
    overflow: hidden;
    height: 100%;
}
.row .col-md-3,
.row .col-md-9 
{
    padding: 30px 3.15% 99999px; 
    float: left;
    margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p 
{
    margin-bottom: 30px;
}
.col-md-3
{
    background: pink;
    left:0;
    width:25%
}
.col-md-9
{
    width: 75%;
    background: yellow;
}

Ответ 6

Решение может быть достигнуто двумя способами.

  • Использование дисплея: таблица и отображение: table-cell
  • Использование отступов и отрицательных полей.

Классы, которые используются для получения вышеуказанного решения, не предоставляются в bootstrap 3. display: table and display: table-cell даны, но только при использовании таблиц в HTML. отрицательная маржа и классы заполнения также не существуют.

Следовательно, для этого мы должны использовать пользовательский css.

Ниже приведено первое решение

Код HTML:

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row tablewrapper">
    <div class="col-md-12 tablerowwrapper">
        <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content">
            <div class="col-md-12">
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

соответствующий css:

html,body,.container{
        height:100%;
    }
    .tablewrapper{
        display:table;
        height:100%;
    }
    .tablerowwrapper{
        display:table-row;
    }
    .sidebar,.content{
        display:table-cell;
        height:100%;
        border: 1px solid black;
        float:none;
    }
    .pad_top15{
        padding-top:15px;
    }

Ниже приведено второе решение

Код HTML:

 <div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row ovfhidden bord_bot height100p">
    <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content pad_top15">
            <div class="col-md-12">

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div> 
  </div>

</div>

соответствующий css:

html,body,.container{
        height:100%;
    }
    .sidebar,.content{
        /*display:table-cell;
        height:100%;*/
        border: 1px solid black;
        padding-bottom:8000px;
        margin-bottom:-8000px;
    }
    .ovfhidden{
        overflow:hidden;
    }
    .pad_top15{
        padding-top:15px;
    }
    .bord_bot{
        border-bottom: 1px solid black;
    }

Ответ 7

Чистое решение CSS достаточно просто, и оно работает как перекрестный браузер.

Вы просто добавляете большое дополнение и одинаково большое отрицательное поле для столбцов nav и content, а затем завершаете их строку в классе с скрытым переполнением.
Просмотр в реальном времени
Изменить вид

HTML

<div class="container">

  <div class="row">
    <div class="col-xs-12 header"><h1>Header</h1></div>
  </div>

  <div class="row col-wrap">

    <div class="col-md-3 col">
      <h1>Nav</h1>
    </div>

    <div class="col-md-9 col">
      <h1>Content</h1>
    </div>

  </div>
</div>

CSS

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

.col-wrap{
overflow: hidden; 
}

Удачи!

Ответ 8

Хорошо, я сделал то же самое, используя Bootstrap 3.0

Пример с последней загрузкой

http://jsfiddle.net/HDNQS/1/

HTML:

<div class="header">
    whatever
</div>
<div class="container-fluid wrapper">
    <div class="row">
        <div class="col-md-3 navigation"></div>
        <div class="col-md-9 content"></div>
    </div>
</div>

SCSS:

html, body, .wrapper {
    padding: 0;
    margin: 0;
    height: 100%;
}

$headerHeight: 43px;

.navigation, .content {
    display: table-cell;
    float: none;
    vertical-align: top;
}

.wrapper {
    display: table;
    width: 100%;
    margin-top: -$headerHeight;
    padding-top: $headerHeight;
}

.header {
    height: $headerHeight;
}

.row {
    height: 100%;
    margin: 0;
    display: table-row;
    &:before, &:after {
        content: none;
    }
}

.navigation {
    background: #4a4d4e;
    padding-left: 0;
    padding-right: 0;
}

Ответ 9

Итак, кажется, что ваш лучший вариант идет с padding-bottom, противоположным отрицательной стратегией margin-bottom.

Я сделал два примера. Один с <header> внутри .container, а другой с ним вне.

Обе версии должны работать правильно. Обратите внимание на использование следующего запроса @media, чтобы удалить дополнительное дополнение на меньших экранах...

@media screen and (max-width:991px) {
    .content { padding-top:0; }
}

Кроме того, эти примеры должны исправить вашу проблему.

Ответ 10

есть намного более простой способ сделать это, если все, о чем вы беспокоитесь, - это укладка цвета.

Поместите это либо первым, либо последним в теге тела

<div id="nfc" class="col col-md-2"></div>

и это в вашем css

#nfc{
  background: red;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: -99;
}

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

Есть некоторые ограничения с этим методом c, но если это для корневой структуры страницы, это лучший ответ.

Ответ 11

попробовать

<div class="container">
    <div class="row">
        <div class="col-md-12">header section</div>

    </div>
     <div class="row fill">
        <div class="col-md-4">Navigation</div>
        <div class="col-md-8">Content</div>

    </div>
</div>

css для класса .fill ниже

 .fill{
    width:100%;
    height:100%;
    min-height:100%;
    padding:10px;
    color:#efefef;
    background: blue;
}
.col-md-12
{
    background: red;

}

.col-md-4
{
    background: yellow;
    height:100%;
    min-height:100%;

}
.col-md-8
{
    background: green;
    height:100%;
    min-height:100%;

}

Для справки просто посмотрите fiddle.

Ответ 12

попробуйте это

 <div class="container">
     <!-- Header-->         
  </div>
</div>
 <div class="row-fluid">
     <div class="span3 well">
         <ul class="nav nav-list">
             <li class="nav-header">Our Services</li>
                <!-- Navigation  -->
             <li class="active"><a href="#">Overview</a></li>
             <li><a href="#">Android Applications</a></li>
             <li class="divider"></li>
         </ul>
     </div>
     <div class="span7 offset1">
      <!-- Content -->         
     </div>
 </div>

Посетите http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/

Благодаря Syed

Ответ 13

Я написал простой CSS, совместимый с Bootstrap, для создания таблиц полной ширины и высоты:

Fiddle: https://jsfiddle.net/uasbfc5e/4/

Принцип:

  • добавьте "tablefull" в основной DIV
  • то неявно, DIV ниже будет создавать строки
  • а затем DIV под строками будут ячейки
  • Вы можете использовать класс "tableheader" для заголовков или аналогичных

HTML:

<div class="tablefull">
    <div class="tableheader">
        <div class="col-xs-4">Header A</div>
        <div class="col-xs-4">B</div>
        <div class="col-xs-4">C</div>
    </div>
    <div>
        <div class="col-xs-6">Content 50% width auto height</div>
        <div class="col-xs-6">Hello World</div>
    </div>
    <div>
        <div class="col-xs-9">Content 70% width auto height</div>
        <div class="col-xs-3">Merry Halloween</div>
    </div>
</div>

CSS:

div.tablefull {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

div.tablefull>div.tableheader, div.tablefull>div.tableheader>div{
    height: 0%;
}

div.tablefull>div {
    display: table-row;
}

div.tablefull>div>div {
    display: table-cell;
    height: 100%;
    padding: 0;
}

Ответ 14

Если после строки не будет содержимого (высота всего экрана будет сделана), трюк с использованием элемента position: fixed; height: 100% для .col:before может работать хорошо:

header {
  background: green;
  height: 50px;
}
.col-xs-3 {
  background: pink;
}
.col-xs-3:before {
  background: pink;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column padding */
  position: fixed;
  width: inherit; /* bootstrap column width */
  z-index: -1; /* puts behind content */
}
.col-xs-9 {
  background: yellow;
}
.col-xs-9:before {
  background: yellow;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column padding */
  position: fixed;
  width: inherit; /* bootstrap column width */
  z-index: -1; /* puts behind content */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<header>Header</header>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">Navigation</div>
        <div class="col-xs-9">Content</div>
    </div>
</div>

Ответ 15

Это не упоминалось здесь со смещением.

Вы можете использовать абсолютную позицию для левой боковой панели.

CSS

.sidebar-fixed{
  width: 16.66666667%;
  height: 100%;
}

HTML

<div class="row">
  <div class="sidebar-fixed">
    Side Bar
  </div>
  <div class="col-md-10 col-md-offset-2">
    CONTENT
  </div>
</div>

Ответ 16

Попробуйте это

<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">Nav     Content</div>
<div class="col-xs-12 col-sm-9">Content goes here</div>
</div>

Это использует Bootstrap 3, поэтому нет необходимости в дополнительном CSS и т.д.

Ответ 17

Вы видели загрузочный файл afix в разделе JAvascript???

Я думаю, что это был бы лучший и самый простой вариант.

Посмотрите там: http://getbootstrap.com/javascript/#affix

Ответ 18

После эксперимента с приведенным здесь кодом: Учебное пособие по загрузке

Вот еще одна альтернатива, использующая последние Bootstrap v3.0.2:

Разметка:

<div id="headcontainer" class="container">
           <p>Your Header</p>    
</div>
<div id="maincontainer" class="container">
      <div class="row">
         <div class="col-xs-4"> 
            <p>Your Navigation</p> 
         </div>
         <div class="col-xs-8"> 
            <p>Your Content</p> 
         </div>
      </div>
</div>

Дополнительные CSS:

#maincontainer, #headcontainer {
width: 100%;
}

#headcontainer {
background-color:#CCCC99; 
height: 150px
}

#maincontainer .row .col-xs-4{
background-color:gray; 
height:1000px
}

#maincontainer .row .col-xs-8{
background-color:green;
height: 1000px
}

Пример JSFiddle

Надеюсь, это поможет любому, кто интересуется.