У меня есть следующий HTML-код (пожалуйста, не обращайте внимания на встроенный стиль, все еще проверяя и в конечном итоге переходите к внешнему файлу):
<div style="width: 80%; margin: 0 auto; border: 1px solid #A7DFFF; background: #DDDDDD; height: 350px;">
<div style="width: 100%; background: #0181C7; height: 50px; line-height: 50px;">
<span style="color: #fff;text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;font: 35px 'ChunkFiveRegular';">PHYSICIANS</span>
</div>
<div style="height: 15px;"></div>
<div style="height: 285;">
<div style="height: 100%; overflow: auto;">
<ul class="traits" id="trait_selector">
<li class="trait active" data-trait-id="9">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=66" class="premote trait-link large btn" data-trait-id="9">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test2 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait active" data-trait-id="12">
<a href="/locations/new-york/neighborhoods?tags[]=66&tags[]=9" class="premote trait-link large btn" data-trait-id="12">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test4 NP</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="14">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=14&tags[]=66&tags[]=9" class="premote trait-link large btn" data-trait-id="14">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test5 MD</span>
<span class="count">4</span>
</a>
</li>
<li class="trait" data-trait-id="5">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=5&tags[]=66&tags[]=9" class="premote trait-link large btn" data-trait-id="5">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test8 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="3">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=3&tags[]=66&tags[]=9" class="premote trait-link large btn" data-trait-id="3">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test9 MD</span>
<span class="count">5</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
<li class="trait" data-trait-id="66">
<a href="/locations/new-york/neighborhoods?tags[]=12&tags[]=9" class="premote trait-link large btn" data-trait-id="66">
<span class="check"><i class="icon icon-ok"></i></span>
<span class="name">test, test10 MD</span>
<span class="count">6</span>
</a>
</li>
</ul>
</div>
</div>
</div>
который должен отображать DIV
с UL
чтобы иметь полосу прокрутки и теперь переполняться за пределы DIV, но это то, что показано:
Почему кнопки не отображают полосу прокрутки и не скрывают содержимое, а не переполняются вне DIV
. Как я могу это исправить?
JSFiddle: ссылка JSFiddle
Старый ответ был неправильным. Вот правильный ответ:
height: 285
отсутствует единица и поэтому игнорируется. Добавление px
к этому определению высоты делает все остальное.
<div style="height: 285;">
Вам не хватает px
<div style="height: 285px;">
Это должно делать свое дело
Попробуйте поместить это в свой главный div:
style="overflow-y: scroll;"