Высота бутстрапа 100% с помощью navbar

Это в основном то, чего я хочу достичь:

Example

Я хочу, чтобы общая страница была на 100% высотой, но когда я добавляю боковую панель и тело на 100%, страница добавляет 40px из навигационной панели, поэтому я получаю полосу прокрутки, даже если ее не должно быть.

Я исправил это с помощью таблиц, но я уверен, что должен быть более простой способ

<body>
    <div class="container-fluid">
        <div class="navbar"></div>
        <div class="sidebar"></div>
        <div class="body"></div>
    </div>
</body>

и css, что у меня есть до сих пор:

body, html, .container-fluid, .sidebar, .body {
    height: 100%;
    min-height: 100%;
}
.navbar {
    height: 40px;
    position: relative;
}

ОТВЕТЫ

Ответ 1

Вам нужно будет выровнять высоту навигационной панели со 100%. Существует несколько решений, многие из которых будут включать JavaScript, но вам это не понадобится.

1: размер окна

Дайте навигатору абсолютное положение. Затем у вас возникает вопрос о содержании других элементов, исчезающих под ним. Затем добавляется следующий трюк, добавляется верхнее заполнение размера навигационной панели. И последний трюк, добавьте box-sizing: border-box; the .sidebar и .body. Для лучшей поддержки браузера вам также нужны -moz- и -webkit-префиксы: -moz-box-sizing:

Пример: Скрипт в размер окна

2: На самом деле вычесть.

использовать .body, .sidebar{ height: calc(100% - 40px); Поддержка браузера очень минимальна для этого из того, что я знаю меньше, чем для размерности окна, поэтому я бы порекомендовал первое решение. Calc объясняется css-трюками

3: Flexbox (добавлено anno 2015)

Теперь вы, вероятно, можете использовать calc, когда знаете высоту, но удивительная замена для использования таблиц - flexbox. Это действительно мой спаситель для сложных проектов на чутких веб-сайтах. Используя одну из лучших функций - flex-shrink: 0 - в заголовке вы можете заставить другие элементы настраиваться, чтобы заполнить остальную часть контейнера.

Старый ответ, вероятно, не самый лучший вариант для записи обширного руководства по flexbox, так что опять-таки отличная ссылка на css-tricks

Ответ 2

Возможно, потому, что он добавляет маркер по умолчанию из навигационной панели. Попробуйте следующее:

.navbar {
    height: 40px;
    position: relative;
    margin: 0;
    padding: 0;
}

Также попробуйте изменить минимальную высоту:

max-height: 100% !important;

Ответ 3

Я изменяю litle ваш код, добавляя контейнер вокруг вашей боковой панели и класса body:

Вот РЕЗУЛЬТАТ

Css:

body, html, .container-fluid, .sidebar, .body {
    height: 100%;
    min-height: 100%;
}

#container{
    width:100%;
    height:100%;
}


.sidebar{
    background-color: green;
    width:10%;
    float:left;
    height:100%;

}

.body{
    background-color: orange;
    float:left;
    width:90%;
    height:100%;

}

.navbar {
    height: 40px;
    position: relative;
    background-color: yellow;
    width:100%;
}

HTML

<div class="container-fluid">
    <div class="navbar">
        navbar
    </div>
    <div id="container">
        <div class="sidebar">
            sidebar
        </div>
        <div class="body">
            body
        </div>
      </div>
</div>

</body>