Bootstrap 3网格使面板保持在右下角和可滚动的div

Question

This is the following HTML:

    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-3">
                    <a href="javascript:void(0)" class="text-muted text-decoration-none">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <p>Text goes Here</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="javascript:void(0)" class="text-muted text-decoration-none">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <p>Text goes Here</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="javascript:void(0)" class="text-muted text-decoration-none">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <p>Text goes Here</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="javascript:void(0)" class="text-muted text-decoration-none">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <p>Text goes Here</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <a href="javascript:void(0)" class="text-muted text-decoration-none">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <p>Text goes Here</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="javascript:void(0)" class="text-muted text-decoration-none">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <p>Text goes Here</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="javascript:void(0)" class="text-muted text-decoration-none">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <p>Text goes Here</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="javascript:void(0)" class="text-muted text-decoration-none">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <p>Text goes Here</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <a href="javascript:void(0)" class="text-muted text-decoration-none">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <p>Text goes Here</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="javascript:void(0)" class="text-muted text-decoration-none">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <p>Text goes Here</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="javascript:void(0)" class="text-muted text-decoration-none">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <p>Text goes Here</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href="javascript:void(0)" class="text-muted text-decoration-none">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <p>Text goes Here</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4" style="border-left: 1px solid black; height:90vh;">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <p>Product Name</p><br />
                                <p>Product Price</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <p>Product Name</p><br />
                                <p>Product Price</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <p>Checkout</p><br />
                            <p>Total Price</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

This is the result:
https://i.stack.imgur.com/Y2Cfb.png

If I added more Product Name the checkout panel will move automatically like this:
https://i.stack.imgur.com/ZjZa3.png

How to make checkout panel stay in bottom right corner only?

And how to make the div in panel product name scrollable?

Answer 1

Is that what you want?

 .wrap { width: 100%; height: 150px; border: 1px solid #cccccc; display: flex; }.column { width: 50%; } ul.column { border-left: 1px solid #cccccc; height: 100%; overflow: auto; padding: 0; margin: 0; list-style: none; } ul li { height: 40px; background-color: aquamarine; margin: 10px; } ul.last { background-color: orange; position: sticky; bottom: 5px; box-shadow: 0 0 10px; margin-bottom: 50px; }

 <div class="wrap"> <div class="column"></div> <ul class="column"> <li></li> <li></li> <li></li> <li></li> <li class="last"></li> </ul> <div>