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

Question

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

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

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

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

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

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

Answer 1

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

overflow-y:scroll; 

Answer 2

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

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

CSS:

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

Answer 3

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

Answer 4

Я отредактировали: 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. Это вам не нужно, когда ваш макет остается таким.

Answer 5

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

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

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

JSFIDDLE

От documentation:

overflow-y

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

Answer 6

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

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

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

Answer 7

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

html{ 
    heigth: 100%; 
} 

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

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

Answer 8

Для Angular2 + Материал2 + Sidenav, вам необходимо сделать следующее:

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