2013-04-19 7 views
3

동적으로로드 된 콘텐츠가있는 웹 페이지에 DIV가 있습니다. 내용이 너무 길거나 브라우저 창이 사용자에 의해 축소되는 경우 DIV에 세로 스크롤 막대가 나타납니다. 물론 DIV의 너비는 스크롤 막대를 수용하기 위해 줄어 듭니다. 지금까지 그렇게 정상.현재 스크롤 막대에 관계없이 고정 폭 콘텐츠

콘텐츠의 너비가 스크롤 막대 가시성과 관계없이 변경되지 않도록 스크롤바 공간을 예약하는 방법이 있습니까? CSS를 사용하는 것이 이상적입니다.

는 IE8 +에서 작동하고 최신 크롬, FF, 사파리, 안드로이드, OSI

http://jsfiddle.net/spiderplant0/VUhDt/

#content{ 
    position: absolute; 
    left:10px; top:10px; bottom:10px; 
    width: 150px; 
    background: yellow; 
    overflow: auto; 
} 
사업부 높이보다 "높은"인 경우
+0

. 가능하다면 어떻게해야할지 모릅니다. –

답변

2

정확한지 확신 할 수 없지만 div를 컨테이너에 넣고 포함하는 div를 overflow : auto? 예.

CSS: 

#container { 
    position: absolute; 
    left:10px; top:10px; bottom:10px; 
    overflow: auto; 
    width: 170px; 
    background: blue; 
} 

#content { 
    width: 150px; 
    background: yellow; 
    overflow: none; 
} 

HTML: 
<div id="container"> 
    <div id="content"> 
    Content here 
    </div> 
</div> 

JS 여기 바이올린 예 : http://jsfiddle.net/SC3bg/ 좋은 질문이다

+0

감사합니다. – spiderplant0

+0

답을 찾아 왔는데 이것이 완벽했습니다. +1 –

+0

이것은 스크롤바가 결코 20 픽셀 이상을 차지하지 않는다고 가정합니다 ... 그리고이 가정은 깨질 수 있습니다. –

0

당신은 실제로 감지하기 위해 자바 스크립트 코드를 사용할 수 있습니다 clientHeight :이 부울 (CSS 편집 폭이 ... 그것에 따라)으로 원하는

div = document.getElementById('content'); 
var hasVerticalScrollbar = div.scrollHeight>div.clientHeight; 

그리고 이렇게, 나는 RESP 수있는 CSS 규칙을 모르는 필요를 충족 함

+0

답장을 보내 주셔서 감사합니다. – spiderplant0