Twitter Bootstrap - 100% высота
Я пытаюсь создать панель администратора для своего приложения, используя фреймворк twitter-bootstrap, но я не могу заставить свой макет работать.
Я был вдохновлен этим дизайном: ![enter image description here]()
Это будет двухстрочный макет "Боковая панель" и "Основной контент", но я не могу получить 100% -ую высоту для работы. Мне удалось получить 2-х столбчатую компоновку со 100-процентной шириной, используя этот код:
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span2 colorize-white">
<!--Sidebar content-->Sidebar
</div>
<div class="span10 colorize-white">
<!--Body content-->Main
</div>
</div>
</div>
CSS
/* Global */
html, body {
color: #6B787F;
padding: 0;
height: 100%;
background: #11161a;
font-family: 'PT Sans' !important;
}
.colorize-white {
background: #FFFFFF;
}
.no-margin {
margin: 0;
}
Я на полпути, но есть две вещи, которые я не могу решить.
1) Высота 100% 2) Избавление от внешних полей на втором изображении
Вы можете видеть, что у меня есть граница между границей браузера и элементами Sidebar/Main, а затем маржа между ними. Мне нужно избавиться от этого, если я добавлю лишний маркер ко всем моим элементам в вставленном HTML, включая тег body, я до сих пор не получаю 100% высоты, и я все еще не могу избавиться от полей между границей браузера и боковой панелью и основным контентом, пока промежуток поля между боковой панелью и основным содержимым исчезает.
Ответы
Ответ 1
Я не уверен, что модель сетки Bootstrap - это то, что вы ищете здесь. Вместо этого вы можете искать абсолютное позиционирование. Например:
#sidebar, #content {
position: absolute;
top: 0;
bottom: 0;
}
#sidebar { left: 0; width: 10em; }
#content { left: 10em; right: 0; }
Попробуйте.
Ответ 2
Вот пример, который работает для Bootstrap 3..
Убедитесь, что HTML и тело имеют высоту 100%. Оберните боковую панель и содержимое, а затем используйте position:absolute
на боковой панели.
http://www.bootstrapzero.com/bootstrap-template/basis
Код: http://bootply.com/86704
Ответ 3
Я не уверен, что это то, что вы ищете, но вот оно.
только немного изменил CSS. margin:0;
до html, body
.