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>

Чи є спосіб зробити це за допомогою 3-х класів завантажувального завантажувача за замовчуванням ?

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

Демонстрація завантаження / 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 і кол-мд-9)

Примітка:

1) Щоб не зіпсувати рідні класи стовпців завантажувача, ми додаємо ще один клас, як no-floatу розмітці, і лише встановити, display:table-cellі float:noneна цей клас (як призначено для самих класів стовпців).

2) Якщо ми хочемо використовувати код таблиці css лише для певної точки розриву (скажімо, середньої ширини екрана і вище), але для мобільних екранів ми хочемо повернутись до звичайної поведінки завантажувальної програми, ніж ми можемо зафіксувати наш спеціальний CSS в межах медіа-запит, скажіть:

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

Codepen demo

Тепер для менших екранів стовпці будуть вести себе як стовпці завантажувальної програми за замовчуванням (кожен отримує повну ширину).

3) Якщо співвідношення 1: 3 необхідне для всіх ширини екрану - тоді, мабуть, краще видалити класичні класи botstrap col-md- * з розмітки, оскільки це не так, як вони призначені для використання.

Codepen demo

Ви можете домогтися того, що хочете за допомогою 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. (Я щойно додав до вашого макета один дів)

Я подумав про тонку зміну, яка не змінює поведінку завантажувача за замовчуванням. І я можу використовувати його лише тоді, коли мені це потрібно:

.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 досить просте, і воно працює як чарівний крос-браузер.

Ви просто додаєте велику прокладку та однаково великий негативний запас у стовпці navi та 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; 
}  

Удачі!

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

1. Використання дисплея: таблиця та дисплей: таблиця-комірка
2. Використання прокладки та негативного запасу.

Класи, які використовуються для отримання вищезгаданого рішення, не містяться у завантажувальній 3. версії відображення: таблиця та дисплей: комірка таблиці надаються, але лише при використанні таблиць у 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;
}

ви просто створюєте форму, закріплюючи її за сторінкою і розтягуючи її на повний зріст. Використовуючи існуючі класи завантаження, ви отримаєте потрібну ширину, і вона залишатиметься чутливою.

У цьому методі ofc є деякі обмеження, але якщо це стосується кореневої структури сторінки, це найкраща відповідь.

Я написав простий CSS, сумісний з Bootstrap, щоб створити таблиці повної ширини та висоти:

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

Принцип такий:

• додайте "столовий" на основний DIV
• то неявно, DIV нижче створить рядки
• і тоді DIV нижче рядків будуть клітинками
• Для заголовків або подібного ви можете використовувати клас «наголовок таблиці»

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/

Завдяки Syed

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

Ви бачили виправлення bootstrap у розділі JA JavaScript ???

Я думаю, що це було б найкраще і найпростіше чувак з рішенням.

Подивіться там: http://getbootstrap.com/javascript/#affix

Після експерименту з наведеним тут кодом: Підручник з завантаження

Ось ще одна альтернатива використання останнього 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

Сподіваюсь, що це допоможе всім, хто цікавиться.