CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Scott Robinson
Scott Robinson

Reputation: 605

Bootstrap list-group overflow full container height

The list-groups in the screenshot are now scrollable - Perfect, however I'd like them to take up 100% of the remaining page height. I tried 100vh - No luck because of other components on the page. 100% height ignores the scrolling and lists everything with a whole page scroll. Tweaking the 'vh' to get the right value got me close, but re-sizing threw it off by small amounts.

I think I might need to use flexbox to make the list-groups fill the remainder of the page, but I've had no success so far with this.

enter image description here

https://jsfiddle.net/aq9Laaew/128800/

<body>
<style>
    .list-group {
        height: 70vh;
        overflow-y: scroll;
    }
</style>
<main role="main" class="container-fluid">
    <div class="row" style="font-size: 10pt;">
        <div class="col-sm">
            <div class="card">
                <div class="card-header">
                    <strong>Notices</strong>
                </div>
                <ul class="list-group list-group-flush">
                    @foreach($notices as $notice)
                        <li class="list-group-item">
                            {{ $notice['body'] }}<br/>
                            <small class="text-muted float-right">{{ $notice['datetime'] }} by {{ $notice['user_id'] }}</small>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
        // ADDITIONAL COL-SM'S
</main>

Upvotes: 3

Views: 7821

Answers (2)

David Liang
David Liang

Reputation: 21476

Don't you just need to calculate the height for the card, which is 100% viewport height minus your padding-top of the body??

.card {
    height: calc(100vh - 3.75rem);
}

And then the only thing you need to do is to set the overflow for list-group:

.card .list-group {
    overflow-y: auto;
}

demo: https://jsfiddle.net/davidliang2008/9kfdwjgx/

Upvotes: 5

swarna
swarna

Reputation: 24

try by adding overflow property to body tag: jsfiddle.

body {
  padding-top: 3.75rem;
  overflow:hidden;
}

.list-group {
  height: 100vh;
  overflow-y: scroll;
  padding-bottom:15px;
}

Upvotes: 0

Related Questions