Question

当我尝试显示滚动条时，我遇到了css问题。当需要滚动条时，我希望宽度适应。现在，如果由于内容不够长而没有滚动条，则会出现一个丑陋的空白区域。

这个jsFiddle会更好地了解我想要描述的内容：

<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

使用

html {
    overflow-y: scroll;
}

无论页面高度如何，您都会有一个滚动条

div顶部的滚动条

1 个答案: