Переполнення прокручування css не працює в div

Я шукаю рішення CSS/Javascript для моєї прокрутки на сторінці HTML.

Я маю три divs, які містять div, заголовок і обгортку div

Мені потрібна вертикальна смужка прокрутки в розділі обгортки, висота повинна бути автоматичною або 100% на основі вмісту.

Заголовок повинен бути виправлений, і я не хочу загальної смуги прокрутки, тому я надав тег overflow: hidden

Мені потрібна вертикальна смужка прокрутки в моїй упаковці div. Як я можу це виправити?

HTML

<div id="container">

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

    <div class="wrapper">
        
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.

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

Please refer to this JS Fiddle

60

8 Відповіді

Ви не маєте властивості CSS height .

Додаючи це, ви помітите, що з'явиться смужка прокрутки.

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

JSFIDDLE

З документації :

overflow-y

Властивість CSS переповнення-y визначає, чи потрібно закріпити вміст, відтворити смугу прокрутки або відображати вміст переповнення елемента на рівні блоку, коли він переповнює верхню та нижню краї.

100
додано
@djechlin Задайте питання за це. Можливо, ви можете використовувати значення відсотків або dislpay: fixed ... Я не знаю, що ви намагаєтесь зробити.
додано Автор Ionică Bizău, джерело
як зробити зупинку висоти у вікні перегляду? Я не хочу писати пикселів, оскільки він не працює для різних розмірів екрана
додано Автор djechlin, джерело
Використовувати властивість висоти виглядового вікна: висота: 100вх
додано Автор Joseph, джерело

Якщо ви додасте висоту в клас .wrapper , то ваш прокрут працює, без прокручування height не працює.

Try this http://jsfiddle.net/ZcrFr/3/

CSS:

.wrapper {
  position: relative;
  overflow: scroll;
  width: 1000px;
  height: 800px;
}
13
додано
Спасибі, але моя фактична вимога полягає в тому, що я не повинен дати будь-який висоти може бути може дати 100% або авто, вміст повинен приймати відповідно до вікна браузера, чи можете ви будь-яке інше рішення в CSS/JAVASCRIPT?
додано Автор user2493730, джерело

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

4
додано
Дайте йому висоту 100%. Тоді ви задовольняєте вимогам щодо переповнення та себе.
додано Автор Nick, джерело
Спасибі, але моя фактична вимога полягає в тому, що я не повинен дати будь-який висоти може бути може дати 100% або авто, вміст повинен приймати відповідно до вікна браузера, чи можете ви будь-яке інше рішення в CSS/JAVASCRIPT?
додано Автор user2493730, джерело

I edited your: 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. Вам це не потрібно, коли макет залишається таким.

3
додано
Завдяки його роботі, але я використовую концепцію повзунка кодера, що володіє основним контейнером div, область заголовка, у мене є три div, повинна бути зафіксована, в області вмісту обгортки слід прокручувати тільки, ви сказали видалити контейнер, так як я можу виправити цю проблему будь-яким іншим способом пл
додано Автор user2493730, джерело

Рішенням потрібно додати висоту: 100%; до всіх батьківських елементів вашої .wrapper-div також. Тому:

html{
    heigth: 100%;
}

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

#container{
    width:1000px;
    margin:0 auto;
    height:100%;
}
2
додано

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

overflow-y:scroll;
1
додано
Але якщо ви перебуваєте на Mac, використовуючи тільки трекпад, це також не спрацює.
додано Автор R.R, джерело
overflow-y: прокрутка також не працює.
додано Автор user2493730, джерело

Для Angular2 + Material2 + Sidenav потрібно виконати наступне:

 ngAfterViewInit() {
   this.element.nativeElement.getElementsByClassName('md-sidenav-content')[0].style.overflow = 'hidden'; 
  }
0
додано
Більш докладно про це? чому ви не могли просто поставити overflow: hidden в CSS у випадку матеріалу 2?
додано Автор Kuncevic, джерело

Я хотів би прокоментувати @Ionica Bizau, але мені не вистачає репутації.
Надати відповідь на ваше запитання щодо коду JavaScript:
Що вам потрібно зробити, це отримати висоту елемента батьків (мінус будь-які елементи, що займають місце), і застосовувати його до дочірніх елементів.

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

Note
window could be replaced by ".container" if that one has no floated children or has a fix to get the correct height calculated. This solution uses jQuery.

0
додано