Как я могу сделать содержимое фиксированного элемента прокручиваемым, только если оно превышает высоту области просмотра?

У меня есть divпозиция fixedв левой части веб-страницы, содержащая меню и ссылки для навигации. У него нет высоты, установленной из css, содержимое определяет высоту, ширина фиксирована. Проблема в том, что если содержимого слишком много, оно divбудет больше, чем высота окна, и часть содержимого не будет видна. (Прокрутка окна не помогает, так как позиция есть, fixedа divпрокрутка не выполняется .)

Я пытался установить, overflow-y:auto;но это тоже не помогает, div, похоже, не замечает, что его часть находится за окном.

Как я могу сделать его содержимое прокручиваемым только при необходимости, если div отображается в окне?

Вы, наверное, не сможете. Вот что-то похожее. У вас не получится обтекать контент, если внизу есть место.

http://jsfiddle.net/ThnLk/1289

.stuck {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 180px;
    overflow-y: scroll;
}

Вы также можете указать высоту в процентах:

http://jsfiddle.net/ThnLk/1287/

.stuck {
    max-height: 100%;
}

Ссылка ниже продемонстрирует, как мне это удалось. Не очень сложно - просто нужно использовать какой-нибудь умный интерфейсный разработчик !!

<div style="position: fixed; bottom: 0%; top: 0%;">

    <div style="overflow-y: scroll; height: 100%;">

       Menu HTML goes in here

    </div>

</div>

http://jsfiddle.net/RyanBrackett/b44Zn/

Вероятно, вам понадобится внутренний div. С css это:

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   overflow-y: auto;
   width: 200px; // your value
}
.inner {
   min-height: 100%;
}

Попробуйте это на своей позиции: фиксированный элемент.

overflow-y: scroll;
max-height: 100%;

Это абсолютно осуществимо с помощью магии flexbox. Взгляни на эту ручку .

Вам нужен такой css:

aside {
  background-color: cyan;
  position: fixed;
  max-height: 100vh;
  width: 25%;
  display: flex;
  flex-direction: column;
}

ul {
  overflow-y: scroll;
}

section {
  width: 75%;
  float: right;
  background: orange;
}

Это будет работать в IE10 +

Вот чистое решение HTML и CSS .

1. Мы создаем контейнер для панели навигации с position: fixed; высота: 100%;

2. Затем мы создаем внутренний блок высотой 100%; переполнение-y: прокрутка;

3. Затем мы помещаем содержимое в это поле.

Вот код:

.nav-box{
        position: fixed;
        border: 1px solid #0a2b1d;
        height:100%;
   }
   .inner-box{
        width: 200px;
        height: 100%;
        overflow-y: scroll;
        border: 1px solid #0A246A;
    }
    .tabs{
        border: 3px solid chartreuse;
        color:darkred;
    }
    .content-box p{
      height:50px;
      text-align:center;
    }

<div class="nav-box">
  <div class="inner-box">
    <div class="tabs"><p>Navbar content Start</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content End</p></div>
    </div>
</div>
<div class="content-box">
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
</div>

Ссылка на jsFiddle:

Я представляю это как обходной путь, а не решение. Это может работать не всегда. Я сделал это так, поскольку делаю очень простую HTML-страницу для внутреннего использования в очень странной среде. Я знаю, что есть библиотеки вроде MaterializeCSS, которые могут создавать действительно хорошие панели навигации. (Я собирался использовать их, но это не сработало с моей средой.)

<div id="nav" style="position:fixed;float:left;overflow-y:hidden;width:10%;"></div>
<div style="margin-left:10%;float:left;overflow-y:auto;width:60%;word-break:break-all;word-wrap:break-word;" id="content"></div>

Добавьте это в свой код для фиксированной высоты и добавьте один свиток.

.fixedbox {
    max-height: auto;
    overflow-y: scroll;
}

Для вашей цели вы можете просто использовать

position: absolute;
top: 0%;

и он по-прежнему может изменять размер, прокручивать и реагировать.