Переполнение: прокрутка не работает

Question

Я создал веб-страницу с плавающей/фиксированной панелью, которая скользит вверху внизу страницы. Внутри этой панели находится дочерний div, у которого есть контент, который нужно прокрутить, я установил overflow в scroll и auto, но никто, кажется, не делает этого. Следует отметить, что я использую плагин easytabs.js для переключения содержимого внутри панели, я считаю, что это может быть причиной того, что он не работает должным образом.

Вы можете найти ссылку на страницу here

Можно ли посмотреть и сказать мне, что я делаю неправильно?

Соответствующий CSS ниже

#menu-tab { 
    display: block; 
    /*background: rgba(255, 255, 255, 0.95);*/ 
    background: #fff; 
    color: #000; 
    font-size: 20px; 
    padding: 10px 15px; 
    margin: 0 auto; 
    width: 250px; 
    text-align: center; 
    cursor: pointer; 
    -webkit-border-top-left-radius: 10px; 
    -webkit-border-top-right-radius: 10px; 
    -moz-border-radius-topleft: 10px; 
    -moz-border-radius-topright: 10px; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
} 

#menu-content { 
    display: none; 
    /*background: rgba(255, 255, 255, 0.95);*/ 
    background: #fff; 
    color: #111; 
    /*padding: 30px 0;*/ 
    height: 1px; 
    /*overflow: hidden;*/ 
} 

/* Styles for Tabs on Side */ 
#tab-side-container { padding: 50px 0; } 
#tab-side-container > ul { list-style: none; margin: 0 40px 0 0; padding: 5px 0; background: #f1f1f1; float: left; } 
#tab-side-container > ul li { width: 200px; margin: 0; padding: 0; text-align: right; font-size: 28px; text-transform: uppercase; } 
#tab-side-container > ul li a { display: block; padding: 11px 15px; outline: none; color: #000; } 
#tab-side-container > ul li a:hover { text-decoration: underline; } 
#tab-side-container > ul li.selected-tab { background: rgba(255, 255, 255, 0.95); position: relative; left: 1px; } 
#tab-side-container > ul li:first-child.selected-tab { border-top: none; } 
#tab-side-container > ul li a.selected-tab { text-decoration: none; } 
#tab-side-container .panel-container { padding-top: 5px; padding-left: 240px; } 

div.menu { 
    overflow: auto; 
} 

Answer 1

Просто смените свой # css-контент css-содержимого для автоматического или прокрутки.

Answer 2

В основном, содержание DIV должен превышать размер DIV для того, чтобы переполнения: прокрутки для работы. Либо сделайте контент больше, либо уменьшите div и посмотрите, работает ли это для вас. Кроме того, «переполнение: авто» в div будет устанавливать его только по вертикали, тогда как «переполнение: прокрутка» будет устанавливать его как по вертикали, так и по горизонтали. Просто примечание.

Answer 3

Один из способов решения проблемы - установить высоту: 100% для div «tab-side-container», div «panel-container» и div «specials-tab». Вам также необходимо установить «переполнение: прокрутка» на вкладке «specials-tab». Вам также может потребоваться установить дочерний div «specials-tab» на высоту: 100%.

Это работает для меня в Chrome.

Answer 4

Приятель, я проверить свой веб-сайт, проблема не в CSS файл, проблема в JQuery плагин с именем изотопа, изотоп вводить этот код:

overflow: hidden; 

как атрибут стиля на. класс меню, поэтому вам нужно правильно настроить плагин.

вы можете попробовать, заменив этот код:

$container.isotope({ 
    itemSelector: '.menu div', 
    animationEngine: 'css' 
}); 

Для этого кода:

$container.isotope({ 
    itemSelector: '.menu div', 
    animationEngine: 'css', 
    containerStyle: { 
     position: 'relative', 
     overflow: 'auto' 
    } 
}); 

Ура!

Answer 5

просто изменить specials-tab height(less then 860px), а также дать specials-tab к

overflow:scroll; 

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

Answer 6

, пожалуйста, добавьте в CSS собственности в вашем CSS

overflow-x: hidden; 
overflow-y: scroll; 

enter link description here также проверить здесь для веб-сайта проблемы

Answer 7

Попробуйте это.Либо # меню Содержание {переполнение: авто} или # меню Содержание {Переполнение: прокручивание}

Answer 8

Рабочая jsbin: (я клонировать ваш сайт в jsbin, чтобы показать пример его работы)
http://jsbin.com/eWoXUHe/1

---

ДЕТАЛИ:

переполнение свитки автоматически по умолчанию. однако, если div не выше высоты окна (или содержит div), то прокручивать нечего, поэтому он не будет прокручиваться. Если вы хотите прокручивать в любом случае, просто сделайте div выше, чем высота окна (или с div).

Просмотрев веб-сайт, я сразу же заметил, что .specials-tab имеет высоту 1080 пикселей. Из-за этого этот div простирается далеко ниже нижней части страницы. Вам нужно сделать это с меньшим div, например 500px.

После того, как вы сделаете так, чтобы высота div была меньше, вы можете прокручивать содержимое внутри. Вам также может потребоваться добавить overflow: scroll во внутренний div (он будет работать, если вы сделаете меньшую внешнюю высоту div).

---

РЕШЕНИЕ:

Следующий код зафиксирует Ваш сайт:

.specials-tab, #starters-tab, #specials-tab, #main-dishes-tab, #sides-tab, #sundries-tab, #drinks-tab, #desserts-tab { 
    height: 300px !important; 
    overflow: scroll !important; 
} 

---

ПРИМЕЧАНИЯ:

• Не использовать !important. Вместо этого добавьте height: 300px; overflow: scroll; вручную к каждому из вышеперечисленных элементов. Я положил !important, чтобы вы могли видеть, как он работает в jsbin.
• Я положил 300 пикселей так, чтобы он был достаточно мал, чтобы вы могли видеть его работу. Однако вы можете сделать этот 500px или любой пиксель, который вы хотите.

Answer 9

Вы можете изменить CSS на что-то вроде ниже:

#parent { 
    overflow-y: scroll; 
    width: 100%; 
    } 
    #box1 { 
    width: 15%; 
    float: left; 
    } 
    #box2 { 
    width: 80%; 
    float: right; 
    } 

Я думаю, что это обеспечивает то, что вы просите.