Bootstrap 3 grid make panel stay on bottom right corner and scrollable div

Issue

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 ?

Solution

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>

Answered By – 多一点点爱

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published