Question

我为一家餐馆写了一页，如here所示我想将滚动添加到左侧面板。我在左侧面板中使用了over-flow-y: scroll，如下所示：

<div class="col-sm-4 col-md-4" id="offers">
                    <div id="offerOne">
                        <img src="images/images.jpg" class="img-responsive center-block">
                    </div>
                    <div id="offerTwo">
                        <img src="images/images.jpg" class="img-responsive center-block">
                        <button class="btn btn-primary center-block">View offer</button>
                    </div>
                    <div id="offerThree">
                        <img src="images/images.jpg" class="img-responsive center-block">
                        <button class="btn btn-primary center-block">View offer</button>
                    </div>
                </div>

css:

#offers {
        margin-top: 0.5%;
        height: 100;
        overflow-y: auto;
        background: #F6F6F6 none repeat scroll 0% 0%;
    }

但是滚动还没有到来。我该怎么做？

Answer 1

尝试将高度值从100更新为100px

#offers {
        margin-top: 0.5%;
        height: 100px;
        overflow-y: auto;
        background: #F6F6F6 none repeat scroll 0% 0%;
    }

Answer 2

#offers的css未指定有效高度。如果你希望它高100像素，你需要改变它：

height: 100px;

在此更改之后，它应该正确滚动，否则div将增长以适合其内容。

Answer 3

使用max-height。溢出流量仅适用于最大高度或最大宽度。

#offers {
        margin-top: 0.5%;
        height: 200px;
        max-height: 100px;
        overflow-y: auto;
        background: #F6F6F6 none repeat scroll 0% 0%;
    }

在bootstrap驱动的页面中向左侧面板添加滚动

3 个答案: