Я пытаюсь создать двухстоечный макет full-height с загрузочным твитом. 3. Кажется, что twitter bootstrap 3 не поддерживает макеты полной высоты. Что я хочу сделать:
+-------------------------------------------------+
| Header |
+------------+------------------------------------+
| | |
| | |
|Navigation | Content |
| | |
| | |
| | |
| | |
| | |
| | |
+------------+------------------------------------+
Если контент растет, навигация также должна расти.
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 bootstrap 3?
Edit: В Bootstrap 4 родные классы могут создавать столбцы полной высоты (DEMO), потому что они изменили их сетчатую систему на flexbox. (Читайте дальше для Bootstrap 3)
<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>
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). Чтобы не испортить собственные классы столбцов начальной загрузки, мы добавляем в эту разметку еще один класс, например no-float
, и устанавливаем только display:table-cell
и float:none
в этом классе (как это указано в сами классы столбцов).
2) Если мы хотим использовать только код css-таблицы для определенной точки прерывания (скажем, ширину экрана и выше), но для мобильных экранов мы хотим по умолчанию вернуться к обычной загрузке чем мы можем обернуть наш пользовательский CSS внутри медиа-запроса, скажем:
@media (min-width: 992px) {
.row .no-float {
display: table-cell;
float: none;
}
}
Теперь, для меньших экранов, столбцы будут вести себя как столбцы начальной загрузки (каждый получает полную ширину).
3) Если соотношение 1: 3 необходимо для всех ширины экрана - тогда, вероятно, лучше удалить классы бутстрапа col-md- * из разметки, потому что это не то, как они предназначены для.
Вы можете достичь того, чего хотите, с трюком padding-bottom: 100%; margin-bottom: -100%;
, вы можете увидеть в этот скрипт.
Я немного поменяю свой HTML, но вы можете добиться того же результата с помощью собственного HTML со следующим кодом
.col-md-9 {
overflow: hidden;
}
.col-md-3 {
padding-bottom: 100%;
margin-bottom: -100%;
}
Только использование 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%
.
Здесь демо с классами 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 методов для этого:
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;
}
Удачи!
Решение может быть достигнуто двумя способами.
Классы, которые используются для получения вышеуказанного решения, не предоставляются в 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
Пример с последней загрузкой
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;
}
content:none
и другие мелочи). Я хотел опубликовать замену, которую я могу также скопировать в пасту
есть намного более простой способ сделать это, если все, о чем вы беспокоитесь, - это укладка цвета.
Поместите это либо первым, либо последним в теге тела
<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, но если это для корневой структуры страницы, это лучший ответ.
position: absolute
, затем position: fixed
?
Итак, кажется, что ваш лучший вариант идет с 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/
Принцип:
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;
}
0%;
до 0;
что совершенно другое. Если это произойдет, вы можете использовать 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
попробовать
<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="/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 и т.д.