Twitter Bootstrap - 100% высота

Я пытаюсь создать панель администратора для своего приложения, используя фреймворк twitter-bootstrap, но я не могу заставить свой макет работать.

Я был вдохновлен этим дизайном:
Это будет двухстрочный макет "Боковая панель" и "Основной контент", но я не могу получить 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.