html - 溢出滚动在表内意外工作

Question

参见 http://liveweave.com/nZjCNe

我已将表格宽度设置为窗口宽度，当 ul > li 中的图像较少时效果很好，但当图像较大时整个窗口显示滚动，为什么？
所以我为 ul 使用了 style="height:100%;overflow:hidden。

html代码

<table border="1" width="100%" height="100%" style="max-width:800px" align="center">
<tr height="40px"><td>tab 1</td><td>tab 2</td></tr>
<tr height="calc(100% - 40px)">
    <td colspan="2">
        <table border="1" width="100%" height="100%">
            <tr>
                <td width="20%">
                    <ul id="image-list" class="scrollimage" style="height:100%;overflow:hidden">
                        <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="101" ></li>
                        <li style=""><img src="img/12.png" class="draggable-image" alt="top" id="30" ></li>
                        <li style=""><img src="img/13.png" class="draggable-image" alt="top" id="10" ></li>
                        <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="30" ></li>
                        <li style=""><img src="img/12.png" class="draggable-image" alt="top" id="30" ></li>
                        <li style=""><img src="img/13.png" class="draggable-image" alt="top" id="10" ></li>
                        <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="30" ></li>
                    </ul>
                </td>
                <td width="60%">
                    <table border="1" width="100%" height="100%">
                        <tr>
                            <td>
                                <table border="1" width="100%" height="100%">
                                    <tr height="calc(100% - 40px)"><td></td></tr>
                                    <tr height="40px"><td></td></tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table border="1" width="100%" height="100%">
                                    <tr height="calc(100% - 40px)"><td></td></tr>
                                    <tr height="40px"><td></td></tr>
                                </table>                            
                            </td>
                        </tr>
                    </table>
                </td>
                <td width="20%">
                    <ul id="image-list" class="scrollimage" style="height:100%;overflow:hidden">
                        <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="101" ></li>
                        <li style=""><img src="img/12.png" class="draggable-image" alt="top" id="30" ></li>
                        <li style=""><img src="img/13.png" class="draggable-image" alt="top" id="10" ></li>
                        <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="30" ></li>
                        <li style=""><img src="img/12.png" class="draggable-image" alt="top" id="30" ></li>
                        <li style=""><img src="img/13.png" class="draggable-image" alt="top" id="10" ></li>
                        <li style=""><img src="img/11.png" class="draggable-image" alt="top" id="30" ></li>
                    </ul>
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

CSS 代码

    #image-list {
    margin: 0;
    padding: 0;
    float: right;
    }
    #image-list li {
    list-style: none;
    overflow: hidden;
    margin-bottom: 8px;
    cursor: pointer;
    }
    .draggable-image{
    width:100%
    }  

请任何人帮助我解决它。

Answer 1

在 ul 中添加 overflow:scroll 并给它一个固定的高度，比如 height:200px，然后你的 ul 会在溢出时滚动

#image-list {
    margin: 0;
    padding: 0;
    float: right;
    height: 200px;
    overflow: scroll;
}