it-swarm.com.ru

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

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

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

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

62
Mkoch

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

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%;
}
66
isherwood

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

<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/

26
Ryan Brackett

Вам, вероятно, нужен внутренний div. С CSS это: 

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

Это абсолютно выполнимо с некоторой магией 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 +

2
transGLUKator

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

overflow-y: scroll;
max-height: 100%;
2
Lucas Bustamante

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

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

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

  1. Мы создаем контейнер контейнер для navbar с Position: fixed; Height: 100%;

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

  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:

1
Manoj Negi

Я представляю это как обходной путь , а не как решение. Это может не работать все время. Я сделал это так, как я делаю очень простую 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>
0
Tyler Montney