Фиксированном положении div с прокруткой
у меня есть div
расположенный fixed
в левой части веб-страницы, содержащей меню и навигационные ссылки. Он не имеет высоты, установленной из css, содержимое определяет высоту, ширина фиксирована. Проблема в том, что если содержание слишком много,div
будет больше высоты окна, и часть содержимого не будет видна. (Прокрутка окна не помогает, так как позиция fixed
и div
не свиток.)
Я пытался установить overflow-y:auto;
но это тоже не помогает, div, похоже, не замечает, что часть его находится за окном.
как я могу сделать его содержимое прокручиваемым только при необходимости, если div
свисает из окна?
8 ответов
вы, вероятно, не можете. Вот кое-что, что приближается. Вы не получите контент, чтобы обтекать его, если внизу есть пространство.
http://jsfiddle.net/ThnLk/1289
.stuck {
position: fixed;
top: 10px;
left: 10px;
bottom: 10px;
width: 180px;
overflow-y: scroll;
}
Update: вы также можете сделать процентную высоту:
http://jsfiddle.net/ThnLk/1287/
.stuck {
max-height: 100%;
}
приведенная ниже ссылка продемонстрирует, как я это сделал. Не очень сложно - просто нужно использовать какой-то умный front-end dev!!
<div style="position: fixed; bottom: 0%; top: 0%;">
<div style="overflow-y: scroll; height: 100%;">
Menu HTML goes in here
</div>
</div>
вам, вероятно, нужен внутренний div. С css это:
.fixed {
position: fixed;
top: 0;
left: 0;
bottom: 0;
overflow-y: auto;
width: 200px; // your value
}
.inner {
min-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 решение.
мы создаем коробку контейнера для 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>
Я представляю это как решение вместо решения. Это может не работать все время. Я сделал это так, как я делаю очень простую 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>
Я не думаю, что это сработает, иначе вам придется написать сценарий для этого. если я правильно понял вашу проблему, я предложу вам использовать этой решение