Vertical Scrollbar - Remove when not necessary

Question

When creating a brand new Asp.Net MVC application with bootstrap 4.3.1 the default landing page contains a vertical scrollbar - which is silly, since the content nicely wraps and the footer is always visible?

I think I have found a solution, tweaking the default site.css as follow: html { position: relative; /*min-height: 100%;*/ min-height: calc(100% - 1px); } — Kommando1980, Sep 06 '19 at 08:02
Possible duplicate of [Hiding the scroll bar on an HTML page](https://stackoverflow.com/questions/3296644/hiding-the-scroll-bar-on-an-html-page) — Mark Redman, Sep 06 '19 at 08:02

score 0 · Answer 1 · answered Sep 06 '19 at 08:01

0

This is probably a css issue?

What have you tried, you should try and show things you've tried so we are not repeating this.

Have you tried setting overflow:hidden

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

answered Sep 06 '19 at 08:01

Mark Redman

22,537
19
88
134

Thank you for your suggestions, do you think my tweak in site.css to set the min-height to calc(100%-1px) is not a good option? – Kommando1980 Sep 06 '19 at 08:04
If it works, and renders on all browsers then its a good option. – Mark Redman Sep 06 '19 at 08:08
overflow: hidden does not work - since it completely removes the scrollbar - even when there are more content that needs to be scrolled to.. – Kommando1980 Sep 06 '19 at 08:40
overflow: auto ? – Mark Redman Sep 06 '19 at 08:41
Yes, I tried using your advice to enhance the bpdy {} tag - to include overflow: hidden; however this removed the scrollbar always - even when it needs to be show. – Kommando1980 Sep 06 '19 at 11:31

score 0 · Answer 2 · answered Sep 06 '19 at 08:04

I think this is a solution (it took care of my unnecessary vertical scrollbar ...)

Tweaking the site.css file 1. changed the min-height: 100% to instead do a calc(100% - 1px)...

html {
  position: relative;
  /*min-height: 100%;*/
  min-height: calc(100% - 1px);
}

Vertical Scrollbar - Remove when not necessary

2 Answers2