У меня есть div
позиция fixed
в левой части веб-страницы, содержащая меню и ссылки для навигации. У него нет высоты, установленной из css, содержимое определяет высоту, ширина фиксирована. Проблема в том, что если содержимого слишком много, оно div
будет больше, чем высота окна, и часть содержимого не будет видна. (Прокрутка окна не помогает, так как позиция есть, fixed
а div
прокрутка не выполняется .)
Я пытался установить, overflow-y:auto;
но это тоже не помогает, div, похоже, не замечает, что его часть находится за окном.
Как я могу сделать его содержимое прокручиваемым только при необходимости, если div
отображается в окне?
html
css
css-position
Мкоч
источник
источник
calc()
является экспериментальной технологией и может привести к неожиданным результатам . Если вы решите использовать его, убедитесь, что вы знаете свою целевую аудиторию, и протестируйте его в этих браузерах.Ответы:
Вы, наверное, не сможете. Вот что-то похожее. У вас не получится обтекать контент, если внизу есть место.
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/
источник
position: fixed; bottom: 0%; top: 0%; overflow: scroll; height: 100vh;
сделает внешний div прокручиваемым в зависимости от содержимого.Вероятно, вам понадобится внутренний 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 .
Мы создаем контейнер для панели навигации с position: fixed; высота: 100%;
Затем мы создаем внутренний блок высотой 100%; переполнение-y: прокрутка;
Затем мы помещаем содержимое в это поле.
Вот код:
.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; }
источник
max-height
не может бытьauto
developer.mozilla.org/en-US/docs/Web/CSS/max-heightДля вашей цели вы можете просто использовать
position: absolute; top: 0%;
и он по-прежнему может изменять размер, прокручивать и реагировать.
источник