CSS : div의 테두리 밖에 스크롤바를 표시하는 방법?

Question

나는 내 웹 사이트를위한 어떤 종류의 대화방을 만들고 있는데, 테두리 밖에 나타나는 세로 스크롤바를 만들 수 없다. 이것은 내가 갖는 것입니다 :

내가 원하는 모든 스크롤 막대가 오른쪽에, 국경 바깥에 표시하는 것입니다. 지금처럼 예쁜 것은 아닙니다.

주요 HTML 코드는 thix 상자의합니다 (chatbox insise 하나의 메시지와)과 같습니다

<div id="sb_body"> 
     <div id="sb_messages_set"> 
      <div class="sb_message"> 
       <div class="sb_message_header"> 
        <div class="sb_message_author">PookyFan</div> 
        <div class="sb_message_hour">12:11</div> 
       </div> 
       <div class="sb_message_content">test</div> 
      </div> 
     </div> 
<!-- Some other chatbox's elements --> 
</div> 

내 CSS 코드는 다음과 같습니다

div#sb_messages_set 
{ 
border: 2px solid black; 
border-radius: 10px; 
background-color: #0080E0; 
overflow: auto; 
height: 300px; 
} 
div.sb_message 
{ 
margin: 2px 4px 5px 4px; 
border-bottom-style: dashed; 
border-width: 1px; 
border-color: black; 
} 
div.sb_message_header 
{ 
clear: both; 
display: block; 
margin-bottom: 3px; 
} 
div.sb_message_author 
{ 
display: inline; 
text-align: left; 
font-weight: bold; 
} 
div.sb_message_hour 
{ 
display: inline; 
float: right; 
} 
div.sb_message_content 
{ 
clear: both; 
text-align: left; 
padding-bottom: 5px; 
} 

달성하기 위해 어떤 방법이 있나요 내가 원하는거야? 나는 대답을 찾고 있었지만 내 문제를 해결할만한 것을 찾지 못했습니다.

아, 코드에 문제가 있지만 문제와 관련이 없다면 의견을 공유하십시오. 최근에 웹 사이트를 만들면서 재미있게 시작 했으므로 여기 초보자 실수를 할 가능성이 있으며 실제로는 아닙니다. 그것을 알고있다.

편집 : 중요한 점을 잊어 버렸습니다. - 경계가 항상 완전히 보이기를 원합니다. 말하자면, 메시지가 스크롤 되기만을 원합니다. 테두리를 만들 때 스크롤 할 때가 있습니다. 즉 , 나는 그렇게 아무것도하지 않으려는이 그림에서

는 chatbox 조금 스크롤되었으며, 상단과 하단 프레임이 표시되지 않습니다. 그러나 div의 내용이 스크롤 되어도 전체 프레임을 볼 수 있어야합니다.

Answer 1

글쎄, 당신은 디자인에 결혼있어, 난 당신이 BG 이미지를 사용하는 것 같아요. CSS로 스크롤 막대를 스타일링 할 수있는 방법을 찾을 수 없습니다. 나는이 솔루션을 다른 jsfiddle 입증했다 : http://jsfiddle.net/jlmyers42/mrx46geg/

그러나 기본적으로, 당신은 단지 주위에 당신의 CSS의 일부를 이동 :

#sb_body { 
    width: 272px; 
    height: 300px; 
    overflow: auto; 
    padding: 0; 
    margin: 0; 
    background: url("http://arcsuviam.com/play/random/bluebg.png") no-repeat left top; 
} 
div#sb_messages_set { 
    margin: 5px; 
} 
div.sb_message { 
    padding: 2px 4px 5px 4px; 
    border-bottom-style: dashed; 
    border-width: 1px; 
    border-color: black; 
} 

Answer 2

나는 overflow : auto 스타일이 적용된 컨테이너에 모든 것을 넣었습니다.

이 바이올린 참조 : 문제가 해결되지 않을 경우, http://jsfiddle.net/jlmyers42/8tptqt19/

<div id="sb_body"> 
    <div id="sb_container"> 
    <div id="sb_messages_set"> 
     <div class="sb_message"> 
      <div class="sb_message_header"> 
       <div class="sb_message_author">PookyFan</div> 
       <div class="sb_message_hour">12:11</div> 
      </div> 
      <div class="sb_message_content">test</div> 
     </div> 
    </div> 
    </div> 
<!-- Some other chatbox's elements --> 
</div> 

CSS 
div#sb_container { 
    overflow: auto; 
} 

Answer 3

간단한.

#divID{ 
overflow: hidden; 
width: calc(1024px + 0); 
} 

#divID:hover{ 
overflow-y:scroll; 
} 

가 우연히 발견하고 나를 위해 작동 : 당신의 사업부 아래와 같이 고정 폭을 넣어

와

. 내 div는 차이를 만드는 경우 절대 배치됩니다.