时间戳

首页 > 解决方案 > 卡片中的垂直滚动不会一直走

html - 卡片中的垂直滚动不会一直走

问题描述

我正在尝试创建一个结果页面，其中每个结果都在卡片中，并且在卡片内部，有嵌套信息，例如菜单和名称。我希望菜单部分可以垂直滚动，但由于某种原因，最后一张卡片不会一直向下滚动。我不希望卡片是可滚动的，只是菜单部分。

HTML：

    <div class="results">
        <div class="shadow p-4 mb-6 rounded result ">
            <p class='rest-title'>McDonalds</p>
            <p class="rest-address">401 College Ave, Ithaca, NY 14850</p>
            <div class="item-container">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
            </div>

        </div>
        <div class="shadow p-4 mb-6 rounded result">
            <p class='rest-title'>McDonalds</p>
            <p class="rest-address">401 College Ave, Ithaca, NY 14850</p>
            <div class="item-container">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
            </div>

        </div>
        <div class="shadow p-4 mb-6 rounded result">
            <p class='rest-title'>McDonalds</p>
            <p class="rest-address">401 College Ave, Ithaca, NY 14850</p>
            <div class="item-container">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
                <hr class="solid">
                <div class="row">
                    <div class="col-10">
                        <p class="item-name">Filet O Fish</p>
                        <p class="item-des">Lightly breaded and fried white fish served on a brioche with romaine
                            lettuce and pickles</p>
                    </div>
                    <div class="col-2 price">
                        <i class="fa fa-usd fa-lg" aria-hidden="true"></i>
                        <p class="item-price">5.00</p>
                    </div>
                </div>
            </div>

        </div>

CSS：

.result {
 overflow: hidden;
 max-height: 350px;
 margin-bottom: 20px;
 background-color: white;
}
enter code here
.rest-title {
 font-size: 2rem;
 font-weight: 700;
 margin-bottom: 0px
}

.rest-address {
 font-family: 'Open Sans';
 font-size:14px
}

.item-container {
 overflow-y: scroll;
}

问题示例

标签： htmlcssscroll

解决方案

在每组项目容器中，最后一个 div 都很糟糕，因为您为它们设置了 max-height。

在.result课堂上，你正在设置；

max-height:350px 
overflow: hidden

由于这两个，您无法完全看到.item-container课程的最后一项。因此，如果您将更改溢出属性，如overflow-y: scroll，它应该可以解决您的问题。使用此解决方案，您将能够滚动显示所有结果。

如果您只想滚动.item-containter；你应该设置一个最大高度并保持 overflow-y:scroll.

推荐阅读