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

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

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

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

Update

Здесь демо с классами 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 методов для этого:

• Использование свойств таблицы/таблицы таблицы 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;
}

Чистое решение 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; 
}  

Удачи!

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

• Использование дисплея: таблица и отображение: 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;
    }

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

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

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

<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, но если это для корневой структуры страницы, это лучший ответ.

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

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

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

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

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

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

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

 <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

попробовать

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

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

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

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

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>

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

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

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

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

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

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

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

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