CODEWITHSUNDEEP
htmlcss
Brian Kalski
Brian Kalski

Reputation: 957

Best way for a web page to occupy 100% of screen across multiple resolutions

I have a page that I want to occupy 100% of the screen. I have tried a few methods but I always get a vertical scrollbar for some screen resolutions. In Chrome 100vh always leaves a scrollbar. I have to bring it down to 97vh before it disappears. I thought about a JavaScript solution but I would like to keep it all css if possible. 

<html>
    <body>
        <div style="height:100vh;border:solid 1px green;">
            <h1>HI</h1>
        </div>
    </body>
</html>

Upvotes: 0

Views: 57

Answers (2)

Om_16
Om_16

Reputation: 686

if you want to hide the scrollbar then you can try the following code in CSS styling-

body::webkit-scrollbar{display:none;}

but if you want no scrolling such that only this would be 100% occupying the page such that there would be no further scrolling then specify the following in CSS code-

body {
  overflow: hidden;
}

Upvotes: 2

Ashish Sood
Ashish Sood

Reputation: 33

Add this in your css, body::webkit-scrollbar{display:none;}. This way the scrollbar will be hidden but you can still scroll

Upvotes: 0

Related Questions