it-swarm.com.ru

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

Я пытаюсь создать макет с двумя столбцами полной высоты с помощью начальной загрузки Twitter 3. Кажется, что начальной загрузки Twitter 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 классы?

229
uladzimir

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


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

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

В приведенном выше коде будут получены столбцы full-height (из-за добавленных нами пользовательских таблиц CSS-таблиц) и с ratio 1: 3 (Navigation: Content) для средней ширины экрана и выше - (из-за классов по умолчанию для начальной загрузки: 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 demo

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

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

Codepen demo

200
Danield

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

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

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

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

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

Работает Fiddle

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

Обновление

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

38
avrahamcool

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

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

Насколько мне известно, вы можете использовать до 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;
}
8
Oriol

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

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

Удачи!

6
David Taiaroa

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

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

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

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

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

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

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

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

3
Giovanni Silveira

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

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

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

и это в твоем css

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

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

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

2
Simon Stevens

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

попробуй это 

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

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

1
Amol Shiledar

пытаться

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

}

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

1
Krishna Rani Sahoo

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

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;
}
0
Nikolay Yenbakhtov