Twitter bootstrap 3 две колонки полная высота

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

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

если содержимое растет, nav также должен расти.

  • высота 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>

есть ли способ сделать это с помощью default Twitter начальной загрузки 3 классы?

226
css html twitter-bootstrap

18 ответов

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

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

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 (навигация:материалы) для средняя ширина экрана и выше - (из-за классов по умолчанию bootstrap: col-md-3 и col-md-9)

NB:

1) чтобы не испортить собственные классы столбцов bootstrap, мы добавляем другой класс, например no-float в разметке и только set 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-* bootstrap из разметки, потому что они не предназначены для использования.

сайт CodePen демо

194

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

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

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

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

чистое решение 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 пустой элемент в конце с четким правилом (используя :after). этот элемент не может быть на одной линии с плавающим стихия, так что он проталкивается до конца. что и составляет 100% документа.

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

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

обновление

здесь демонстрация с классами Bootstrap. (Я только что добавил один div в ваш макет)

38

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

.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>
22

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

  1. использование свойств таблицы отображения CSS / таблицы-ячейки или использование фактических таблиц.
  2. используя абсолютный расположенный элемент внутри оболочки.
  3. используя свойство отображения Flexbox, но на сегодняшний день оно все еще имеет частичная поддержка
  4. имитировать полные высоты столбцов с помощью faux колонка техника.
  5. использование техника заполнения / маржи. пример.

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;
}
8

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

  1. использование дисплея: таблица и дисплей: таблица-ячейка
  2. используя прокладку и отрицательный запас.

классы, которые используются для получения вышеуказанного решения не предусмотрены в Bootstrap 3. display: table и 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's 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's 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's 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's 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's 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's 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's 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's 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's 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's 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's 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's 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's 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's 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's 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's 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's 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's 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;
    }
5

чистое решение CSS достаточно просто, и оно работает как кросс-браузер очарования.

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

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; 
}

удачи!

5

хорошо, я достиг того же, используя Bootstrap 3.0

пример с последним bootstrap

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;
}
4

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

Я привел два примера. С <header> внутри .container, и еще один с ним за пределами.

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

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

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

2

есть гораздо более легкий способ сделать это, если все, что вас беспокоит, лежит цвет.

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

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

и это в вашем css

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

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

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

2

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

Скрипка : 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;
}
2

попробовать

<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{
    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%;

}

для вашей справки просто загляните в скрипка.

1

попробуй такое 

 <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

1

если после строки не будет содержимого (взята вся высота экрана), трюк с использованием 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's padding */
  position: fixed;
  width: inherit; /* bootstrap column's 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's padding */
  position: fixed;
  width: inherit; /* bootstrap column's 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>
-1

это не было упомянуто здесь взаимозачет.

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

в 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>
-2

попробуй такое

<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 и т. д...

-3

вы видели бутстрап адррес afix В разделе JAvascript ???

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

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

-3

после экспериментов с кодом, приведенным здесь:Ушко Учебник

вот еще одна альтернатива с использованием latest загрузки В3.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

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

-3