Фиксированном положении div с прокруткой

Question

Фиксированном положении div с прокруткой

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

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

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

456 8

html css css-position

8 ответов:

Comments

Ничего не найдено.

isherwood · Accepted Answer · 2018-03-09 16:52:47

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

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

Ryan Brackett · Accepted Answer · 2016-01-06 19:48:24

ссылка ниже продемонстрирует, как я это сделал. Не очень сложно - просто нужно использовать какой-то умный передний конец dev!!
<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/

Aureliano Far Suau · Accepted Answer · 2014-05-19 16:26:54

вам, вероятно, нужен внутренний div. С css это:
.fixed {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   overflow-y: auto;
   width: 200px; // your value
}
.inner {
   min-height: 100%;
}

transGLUKator · Accepted Answer · 2015-10-23 10:58:23

Это абсолютно выполнимо с некоторыми элемента магии. Взгляните на это pen.

вам нужен 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+

Lucas Bustamante · Accepted Answer · 2017-04-06 22:12:46

попробуйте это на вашей позиции:фиксированный элемент.
overflow-y: scroll;
max-height: 100%;

Manoj Negi · Accepted Answer · 2017-06-01 14:53:15

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

мы создаем контейнер для navbar с положение: фиксированный; высота:100%;
после этого мы создаем внутреннюю коробку с высота: 100%; overflow-y: scroll;
Далее, мы помещаем содержимое внутри этой коробки.

вот код:

.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:

Tyler Montney · Accepted Answer · 2017-10-12 06:10:22

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

Asheesh Kumar · Accepted Answer · 2015-06-12 11:52:49

Я не думаю, что это будет работать, иначе вам придется написать сценарий для этого. если я получаю вашу проблему правильно, то я предлагаю вам использовать этой решение