Як я можу зробити вміст фіксованого елемента прокручуваним лише тоді, коли воно перевищує висоту області перегляду?

У мене є 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. Створюємо контейнер для вікна навігації з позицією: fixed; висота: 100%;

2. Потім створюємо внутрішню коробку з висотою: 100%; overflow-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%;

і він все ще може бути змінений, прокручуваний та чуйний.