는 오버 플로우와 요소의 크기를 조정 : 자동 계정

Question

에 스크롤바를 복용 나는 이미지 뷰어 확인해야합니다 : 사업부 및 이미지/비디오 크기 조절이 TD 거기 왼쪽에 있습니다. 오른쪽 TD에는 의견이 있습니다. 이미지의 크기가 조정되어 가로 세로 비율이 높은 파노라마 사진을 스크롤 막대 (가로 또는 세로)로 볼 수 있지만 필요할 때만 스크롤 막대가 표시됩니다. 문제는 올바른 너비/높이를 계산하는 방법입니다.

<table><tr> 
    <td id="container" width="100%" style="height: 100%"> 
     <div id="frame" style="border: 7px solid; width: 200px; height: 150px; overflow: auto"> 
      <img id="content" src="..." /> 
     </div> 
    </td> 
    <td width="200">some comments</td> 
</tr></table> 

내가 그것을 min(size of #container, max(size of #frame, size of #content)) 같았 있도록 #frame 크기를 조정하려면 :

는 여기에 내가 작업 문서 구조입니다. 즉, 치수 각각 #container의 내부에 극대화 된 있도록 크기를 조정하지만, #content 및 #frame 사이에 공백이 있었다 없습니다.

는 I 계정 경계, 패딩, 마진을 고려하여, 각 차원에 분 (최대 ...)의 계산을한다. 그런 다음 스크롤 막대를 남깁니다.

clientHeight & style.height의 차이를 확인하고 #frame이 여전히 #container보다 작 으면 차이를 추가해 봅니다. 그러나 이것은 단독으로 또는 함께 사라지는 스크롤 막대 때문에 매우 신뢰할 수 없습니다. 기존의 솔루션은

있습니까?

Answer 1

나는 다음과 같은 솔루션에 온 : 요소의 크기 밖으로

1. 그림, 그것의의 장식,
2. 콘텐츠 크기로 컨테이너의 크기를 조정 가능한 공간,하지만 더 이상 부모가 아닌
3. 컨테이너가 원하는 크기보다 작은 경우 스크롤 막대가 있으므로 다른 치수를 확장해야합니다. 그것을 확장하십시오.