오버 플로우 스크롤 예기치 않은 내부 테이블

Question

창 폭에 http://liveweave.com/nZjCNe

내가 설정 한 테이블의 너비를 참조 작동 UL 내부 이미지> 리 덜하지만 이미지가 큰 경우 전체 창, 왜 스크롤을 표시 할 때, 그것을 잘 작동?
그래서 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; 
}