Сделать панель навигации занимает всю высоту страницы в CSS

Я разрабатываю веб-сайт с использованием css и html. Мне удалось получить панель навигации в левой части моей страницы с помощью этого css, однако, когда экран прокручивается вниз, панель навигации больше не продолжается.

#navbar {
  background: #a8a599;
  float: left;
  width: 20%;
  height: 100%;
}

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

вот он на скрипке, если вы хотите посмотреть на остальные страницы http://jsfiddle.net/HRpXV/3/embedded/result/

6
css html javascript navigation

5 ответов

100% не применяется, потому что он плавает. Измените родительский контейнер на position: relative и navbar к position: absolute решит проблему.

#container{
    position: relative;
}

#navbar {
    background: #a8a599;
    /*float: left; Instead of float, use absolute position*/
    position: absolute;
    width: 20%;
    height: 100%;
}

демо

9

используя только HTML и CSS, вы обычно можете исправить эту проблему высоты 100%, используя:

body,html{
   height:100%;
}

Если вы хотите использовать метод JavaScript, то это должно работать

document.getElementById("navbar").style.height=window.innerHeight;

это установит высоту элемента navBar на любую высоту окна браузера

1

это заняло у меня 2 часа, но я, наконец, нашел решение этого! Принятый ответ Дерека почти работает, но, как следует из моего комментария, не полностью. Когда ваша левая панель имеет больше содержимого, чем основная панель, левое меню не будет растягиваться до высоты его содержимого. Возможно, вы никогда не получите так много опций в этом меню, но я создаю новую администрацию, у которой будет много модулей в будущем, и вы никогда не знаете, может ли это произойти или нет.

решения старые хорошие столы! Не волнуйся, не совсем. Только свойство отображения css со значением table, table-row и table-column:

основные идеи:

#page {
    display: table;
    min-height: 100%;
    width: 100%;
}
#pageRow {
    display: table-row;
}
#leftMenu {
    display: table-cell;
    width: 300px;
    background-color: red;
}
#content {
    display: table-cell;
    background-color: blue;
}

  1. небольшое содержание в обоих разделах http://jsfiddle.net/85w56gkx/1/

  2. больше содержимого в разделе меню слева http://jsfiddle.net/1o92r7ao/

  3. больше контента в разделе основного контента http://jsfiddle.net/Ldav83vn/

1

Если вы планируете исправить navBar, вы можете сделать что-то вроде Скрипка

*{
    margin:0;padding:0;
}
#navBar {
    background: red;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100px;
}
#content {
    background: yellow;
    min-height:1000px;
    display: block;
    margin-left: 100px; /*width of nav bar*/
}
0

вы можете просто изменить свой #navbar css и установите положение в fixed

#navbar {
  background: #a8a599;

  /* removed css */
  /* float: left; */

  /* new css */
  position:fixed;
  top:0;
  left:0;
  /***********/

  width: 20%;
  height: 100%;
}

float: left; располагается по отношению к документу.

удаление поплавка и добавление position: fixed; расположит элемент относительно окна.

затем вы можете добавить сверху, снизу, слева или справа в соответствии с вашими потребностями

Я раздвоенный твою скрипку для примера здесь

подробнее о float В3 в CSS Float

подробнее о position W3 CSS позиция

0