Прокрутка переполнения css не работает в div

Я ищу решение CSS/Javascript для моей прокрутки страницы HTML.

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

Мне нужна вертикальная полоса прокрутки в div обертки, высота должна быть автоматической или 100% на основе содержимого.

Заголовок должен быть исправлен, и мне не нужна общая полоса прокрутки, поэтому я дал overflow:hidden в теге body,

Мне нужна вертикальная полоса прокрутки в моей обертке div. Как я могу это исправить?

HTML

<div id="container">

    <div class="header"></div>

    <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p>
        <!-- Lots more paragraphs-->
    </div>

</div>

CSS

body{ margin:0; padding:0; overflow:hidden; height:100%}
#container { width:1000px; margin:0 auto;}
.header { width:1000px; height:30px; background-color:#dadada;}
.wrapper{ width:1000px; overflow:scroll; position:relative;}

Обратитесь к этому JS Fiddle

Ответ 1

Вам не хватает свойства CSS height.

Добавив его, вы заметите, что появится полоса прокрутки.

.wrapper{ 
    // width: 1000px;
    width:600px; 
    overflow-y:scroll; 
    position:relative;
    height: 300px;
}

JSFIDDLE

Из документации:

`overflow-y`

Свойство overflow-y CSS указывает, следует ли клип-контент, визуализировать полосу прокрутки или содержимое переполнения отображения элемента блока уровня, когда он переполняется в верхнем и нижнем краях.

Ответ 2

Если вы добавляете высоту в класс .wrapper, тогда ваш свиток работает, без height прокрутка не работает.

Попробуйте это http://jsfiddle.net/ZcrFr/3/

CSS

.wrapper {
  position: relative;
  overflow: scroll;
  width: 1000px;
  height: 800px;
}

Ответ 3

Я отредактировал ваш: Fiddle

html, body{ margin:0; padding:0; overflow:hidden; height:100% }
.header { margin: 0 auto; width:500px; height:30px; background-color:#dadada;}
.wrapper{ margin: 0 auto; width:500px; overflow:scroll; height: 100%;}

Предоставление html-тегам 100% высоты - это решение. Я также удалил контейнер div. Вы не нуждаетесь в этом, когда ваш макет остается таким.

Ответ 4

Вы не дали div высоты. Таким образом, он будет автоматически растягиваться при добавлении большего количества контента. Дайте ему высоту исправления и появятся полосы прокрутки.

Ответ 5

Попробуйте это для вертикальной полосы прокрутки:

overflow-y:scroll;

Ответ 6

Решение состоит в том, чтобы добавить высоту: 100%; ко всем родительским элементам вашего .wrapper-div. Итак:

html{
    heigth: 100%;
}

body{ 
    margin:0;
    padding:0;
    overflow:hidden;
    height:100%;
}

#container{
    width:1000px;
    margin:0 auto;
    height:100%;
}

Ответ 7

Я хотел прокомментировать @Ionica Bizau, но у меня недостаточно репутации. Чтобы ответить на ваш вопрос о javascript-коде:
Что вам нужно сделать, так это получить высоту родительского элемента (минус любые элементы, занимающие пробел), и применить их к дочерним элементам.

function wrapperHeight(){
    var height = $(window).outerHeight() - $('#header').outerHeight(true);
    $('.wrapper').css({"max-height":height+"px"});      
}

Примечание
окно может быть заменено на ".container", если у этого нет родившихся детей или у него есть исправление, чтобы получить правильную высоту. Это решение использует jQuery.

Ответ 8

Для Angular2 + Material2 + Sidenav вам нужно будет сделать следующее:

 ngAfterViewInit() {
   this.element.nativeElement.getElementsByClassName('md-sidenav-content')[0].style.overflow = 'hidden'; 
  }