CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Matt
Matt

Reputation: 6943

100% height on Bootstrap 4 columns (no scrollbar on browser)

I'm using Bootstrap 4 and trying to set 3 columns on the page to have 100% height - to only have scrollbars on the columns and NOT on the page. I have tried h-100 on the row div as well as various custom css changes like setting the height and max-height to 100% on each of the columns and other solutions I found on Stack Overflow and other sites. No matter what I do, I just cannot get it working right. Would be grateful if somebody could help me out. Here is the site:

https://gordon-matt.github.io/Extenso/

To see what I am trying to do, go here: https://gordon-matt.github.io/Extenso/#assembly/bde7b8d9-116a-4e39-939f-2acce6aba664

then click the first button on the left (the one that says "18 Classes"). You will see the middle column is a list group and will fill with items. The scrollbars will appear, but they extend longer than the page itself and now there's a scrollbar on the browser.. Instead, I don't want any scrollbars on the browser and ONLY a scrollbar on the columns. What can I do to fix this?

Upvotes: 0

Views: 2008

Answers (3)

Avinash Maurya
Avinash Maurya

Reputation: 163

I would suggest to not to use !important too often, it makes specificity unpredictable,

Here is my solution, just check following CSS IDs and classes:

#types {
    overflow-y: auto !important;
    height: 58vh;
}

.h-100 {
    height: 73vh !important;
}

Please let me know if it works!!!

Upvotes: 0

Mohammadreza
Mohammadreza

Reputation: 83

You should use height: 100vh; style for your section that you want to be 100% height for every device.

Upvotes: 1

Vrijraj Singh
Vrijraj Singh

Reputation: 95

Use CSS Property style="height:100vh"

Upvotes: 1

Related Questions