Twitter загружает 3 двух колонки в полный рост

Я пытаюсь сделать макет с двумя колонками в полный рост с помощью twitter bootstrap 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 начальной загрузки 3 класса?

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

Bootply demo / 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) Для того , чтобы не напутают родные классы столбцов Bootstrap, тогда мы добавим еще один класс , как 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, то, вероятно, лучше удалить из разметки классы boottrap col-md- *, поскольку они не предназначены для использования.

Codepen демо

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

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

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

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

Чистое решение 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промежуток остальной частью высоты контейнера, без указания какой-либо конкретной высоты / поля.

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

Обновить

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

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

.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 методов для этого:

1. Использование CSS для отображения свойств таблицы / таблицы-ячейки или использование реальных таблиц.
2. Использование абсолютно позиционированного элемента внутри оболочки.
3. Использование свойства отображения Flexbox, но на сегодняшний день оно все еще имеет частичную поддержку
4. Имитируйте полную высоту столбца, используя технику искусственного столбца .
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;
}

Современное и очень простое решение:

HTML:

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

CSS:

.row{
    display: flex;
}

Чистое CSS-решение достаточно простое и работает как браузер Charm Cross.

Вы просто добавляете большой отступ и одинаково большое отрицательное поле к столбцам 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; 
}  

Удачи!

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

1. Использование display: table и display: table-cell
2. Использование отступов и отрицательного поля.

Классы, которые используются для получения вышеупомянутого решения, не представлены в начальной загрузке 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;
    }

Хорошо, я добился того же, используя 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;
}

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

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

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

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

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

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

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

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

и это в твоем css

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

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

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

Я написал простой 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;
}

пытаться

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

}

Для справки просто загляните в скрипку.

попробуй это

 <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/

Благодаря Сайед

Если после строки содержимого не будет (берется вся высота экрана), трюк с использованием 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>

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

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

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>

Попробуй это

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

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

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

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

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

Вот еще одна альтернатива, использующая последнюю версию 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

Надеюсь, это поможет всем, кто заинтересован.