为什么滚动条不会显示在DIV中

Question

我有以下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&amp;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&amp;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&amp;tags[]=14&amp;tags[]=66&amp;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&amp;tags[]=5&amp;tags[]=66&amp;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&amp;tags[]=3&amp;tags[]=66&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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 Link

Answer 1

旧答案错了。这是正确答案：

height: 285缺少一个单位，因此被忽略。将px添加到该高度定义会使其他所有内容都有效。

Answer 2

<div style="height: 285;">

你错过了px

<div style="height: 285px;">

应该做的伎俩

http://jsfiddle.net/QYA4Y/1/

Answer 3

尝试将其放入主div：

style="overflow-y: scroll;"