v4 bootstrap полная высота боковая панель

Я использую самую последнюю версию бутстрапа, а моя сибербара слишком короткая и не полная.
Вы можете посмотреть его здесь: http://srv.sniperjum.com/sh1omi/bootstrap-dev/
CSS: http://srv.sniperjum.com/sh1omi/bootstrap-dev/css/style.css
Эта проблема с моей CSS или это проблема с загрузчиком? и как я могу это исправить?v4 bootstrap полная высота боковая панель

CSS

li.active{ 
    background-color: #428bca; 
} 
li { 
    padding-bottom: 5px; 
    padding-top: 5px; 
} 
.sidebar{ 
    background-color: #f5f5f5; 
    padding-right: 20px; 
    padding-top: 20px; 
} 

/* Sidebar navigation */ 
.nav-sidebar { 
    margin-right: -21px; /* 20px padding + 1px border */ 
    margin-bottom: 20px; 
    margin-left: -20px; 
} 
.nav-sidebar > li > a { 
    padding-right: 20px; 
    padding-left: 20px; 
} 
.nav-sidebar > .active > a, 
.nav-sidebar > .active > a:hover, 
.nav-sidebar > .active > a:focus { 
    color: #fff; 
    background-color: #428bca; 
} 
button{ 
    color: #fafafa 
}

HTML

<nav class="navbar navbar-dark navbar-full bg-inverse"> 
    <button type="button" class="navbar-toggler" onclick="ToogleNavbar()">&#9776;</button> 
</nav> 
<div class="container-fluid"> 
    <div class="row" > 
     <div class="col-sm-3 col-md-2 sidebar" id="Navbar"> 
      <ul class="nav nav-sidebar"> 
       <li class='active'><a href="/">Home</a></li> 
       <li><a href="../notes">Notes</a></li> 
       <li><a href="../chat">Chat</a></li> 
       <li><a href="../rss">RSS</a></li> 
      </ul> 
     </div> 
     <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">\</div> 
    </div> 
</div>

источник

2016-05-09 sh1omi

Поместите свой код, имеющие отношение к вашему вопросу в теле вопроса , а не ссылка –

Для этого существует множество решений: вы можете использовать табличный макет, так что боковая панель также будет одной из строк таблицы и содержимого, тогда вы должны установить минимальную высоту всего контейнера на высоту страницы (100vh). Здесь вы можете использовать гибкий макет. Также одним из решений является установка позиции боковой панели на фиксированную ('left: 0' и' top: 0'). Затем установите его высоту на 100%. – Kamil

@ Камил, можете ли вы показать мне, как это сделать? – sh1omi

Чем проще способ сделать что-то вроде этого:

.sidebar { 
    height: calc(100vh - 54px); /* 54 pixel is the height of your .navbar */ 
}

источник

2016-05-09 10:35:51

Я думаю, что это не очень хорошая идея, если секция содержимого будет выше, боковая панель будет ниже, чем вся страница – Kamil

Я просто попробовал этот css и как @Kamil сказал, что боковая панель коротка, когда раздел контента длиннее. – sh1omi

-1

Вы можете попробовать это вместо того, чтобы ваш

удалить эти два бутстраповских COLS
<div class="col-sm-3 col-md-2 sidebar" id="Navbar"> Если вы используете этот COLS положение объекта будет относительным я считаю, что лучше удалить этот COLS и использовать этот CSS.

width: 210px; 
    height: 100%; 
    position: fixed;

источник

2016-05-09 10:53:33 Varma

Не работает, снимок экрана: http://i.imgur.com/x5ejTDR.png – sh1omi

.sidebar{ 
position: absolute; 
width: 250px; 
height: 100%; }

Атрибут высота используется для установки высоты боковой панели.

Для бокового стержня полной длины должно быть задано значение 100%. Для половины длины экрана задано значение 50% Итак, и так далее.

Это должно помочь.

источник

2016-05-09 11:52:11 Uswer721

Не работает, снимок экрана: http://i.imgur.com/JzY7rXS.png – sh1omi

@ sh1omi вы использовали ' '? Если да, то удалите его и попробуйте. – Uswer721

Bootstrap 4 изменилось с тех пор этот вопрос был задан, но вы можете сделать врезку полную высоту с помощью min-height ..

.sidebar{ 
    background-color: #f5f5f5; 
    padding-right: 20px; 
    padding-top: 20px; 
    min-height: calc(100vh - 50px); 
}

http://www.codeply.com/go/oiByWVrIbe

источник

2017-02-08 15:40:19 ZimSystem

v4 bootstrap полная высота боковая панель

ответ

Смежные вопросы