Question

我使用Twitter BS 2.1版。基本上我有一个将有2个div并排的模态。假设div1的高度为700px，我想将外部div限制为400px。 Div2的最大高度将是外部div的高度。

不幸的是，正在发生的是外部div正在进行滚动，而内部div获得的滚动条只能滚动大约10px。我试过溢出：隐藏在外部div上，但没有运气。

这就是它现在的样子：http://jsfiddle.net/sLqkdbr3/3/。感谢您的帮助，谢谢！

这是我的HTML，因为我被迫粘贴它：

<body>
    <div class='show_location_picker'>Click to Show</div>
    <div class="modal hide fade" id='locationModal'>
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h3>Select Location</h3>

        </div>
        <div class="modal-body">
            <div class="row span10">Enter your address
                <input type='address' />
            </div>
            <div class="row center" style='overflow: hidden'>
                <div class="span3" style='overflow: scroll'>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                    <p>Store 1</p>
                </div>
                <div class="span5">
                    <div id="map_canvas" data-lat='44.616698' data-long='-69.416702'></div>
                </div>
            </div>
        </div>
        <div class="modal-footer"> <a href="#" class="btn">Close</a>
 <a href="#" class="btn btn-primary">Save changes</a>

        </div>
    </div>
</body>

Answer 1

你可以做到，你必须在css上做一点改动，首先要改变模态体溢出可见：

.modal-body {
    max-height: 400px;
    overflow-y: visible;
    padding: 15px;
    position: relative;
}

并给内部div一些高度并溢出滚动：

.span3 {
    max-height: 400px;
    width: 220px;
    overflow:scroll;
}

我目前已将css添加到两个div上应用的类中。你可以调整它们而不是修改bootstrap原始css。

更新的FIDDLE：

http://jsfiddle.net/sLqkdbr3/7/

是否可以禁用外部元素上的滚动并保持内部元素的滚动？

1 个答案:

更新的FIDDLE：