div 상단의 스크롤 막대

Question

스크롤 막대를 표시하려고 할 때 CSS 문제가 있습니다. 스크롤 바를 필요로 할 때 너비를 적용하고 싶습니다. 바로 지금, 내용이 길지 않아 스크롤 막대가 없으면 추한 공백이 있습니다.

는

이 jsFiddle 내가 설명하기 위해 노력하고있어 더 나은 아이디어를 줄 것이다 : 사용

html { 
    overflow-y: scroll; 
} 

을 사전에

http://jsfiddle.net/XGV2t/2/

<div id="wiselinks_content" class="containers message_content" style="max-height: 500px;"> 
<div style="padding:20px; float:left;"> 
    <div style="float:left; width: 100%; margin-bottom:10px" class="message_box message_box_18"> 
     <div style="float:left; height: 40px; width: 40px; margin-right: 6px"> <a href="/thibault"><img alt="Profile_304577200_75sq_1373018073" height="40" src="http://images.ak.instagram.com/profiles/profile_304577200_75sq_1373018073.jpg" style="display:block;" width="40"> 
     </a> 
     </div> 
     <div style="float:left;width: 88%;"> <b> <a href="/thibault">Thibault B</a> </b><span style="color:#999; font-size: 11px"> about 1 month ago</span><br>hello 
      <br> 
     </div> 
    </div> 
    <div style="float:left; width: 100%; margin-bottom:10px" class="message_box message_box_19"> 
     <div style="float:left; height: 40px; width: 40px; margin-right: 6px"> <a href="#"><img alt="Profile_304577200_75sq_1373018073" height="40" src="http://images.ak.instagram.com/profiles/profile_304577200_75sq_1373018073.jpg" style="display:block;" width="40"> 
</a> 

     </div> 
     <div style="float:left;width: 88%;"> <b> <a href="#">Thibault B</a> </b><span style="color:#999; font-size: 11px">about 1 month ago</span><br>how are you 
      <br> 
     </div> 
    </div> 
    <div style="float:left; width: 100%; margin-bottom:10px" class="message_box message_box_28"> 
     <div style="float:left; height: 40px; width: 40px; margin-right: 6px"> <a href="#"><img alt="Picture?type=large" height="40" src="http://graph.facebook.com/100001498571059/picture?type=large" style="display:block;" width="40"> 
</a> 

     </div> 
     <div style="float:left;width: 88%;"> <b> <a href="/marunbai">Runbai M</a> </b><span style="color:#999; font-size: 11px">28 days ago</span><br>look at this<br><br> 
     </div> 
    </div> 
</div> 
<div class="create_message"> 
    <form accept-charset="UTF-8" action="/messages/create" class="simple_form new_message" enctype="multipart/form-data" id="new_message" method="post"> 
     <div style="margin:0;padding:0;display:inline"> 
      <input name="utf8" type="hidden" value="✓"> 
      <input name="authenticity_token" type="hidden" value="k32vPIjud4khEnj6U3Bxcx1bVXrRcDpS8dO9S/8K1Uw="> 
     </div> 
     <input id="message_recipient_id" name="message[recipient_id]" type="hidden" value="12"> 
     <input id="message_type" name="message[type]" type="hidden" value="reply"> 
     <input id="message_sender_id" name="message[sender_id]" type="hidden" value="1"> 
     <textarea cols="40" id="message_body" name="message[body]" rows="20"></textarea> 
     <input id="message_subject" name="message[subject]" type="hidden" value=""> 
     <output id="pic_preview"></output> 
     <div class="options"> 
      <label class="filebutton"> 
       <img src="/assets/photo_logo.png" height="20px" width="20px"> <span> 
       <input id="picture_for_message" name="message[picture]" type="file"> 
      </span> 

      </label> 
      <input class="button create_message_button" name="commit" type="submit" value="Send"> 
     </div> 
    </form> 
</div> 

감사

Answer 1

을 그리고 당신은 것입니다 항상 페이지 높이에 관계없이 스크롤 막대가 있습니다.