how to fit the webpage exactly the screen size without scrolling?

Question

I am new to css and I am finding some difficulty in setting my webpage to fit exactly the screen size but it doesn't fit and a scroll bar occurs. I have tried all the ways mentioned here But none of them works. My web page looks more or less like this. When i used

html{
height: 100vh;
}

body{
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    font-family: gothambook;
    position: fixed;
    top: 0;
    bottom: 0;
    }

The scroll bar didn't occur but the content went below the screen and was not visible

`{max-width: 100vw; max-height: 100vh;}` – Dec 22 '16 at 03:16 — , Dec 22 '16 at 03:16

score 20 · Answer 1 · answered Feb 05 '18 at 16:18

20

html {}
body {
    height: 95vh;
}

vh stands for View Height and so 97vh is 97% the View/Browser's height.

https://css-tricks.com/fun-viewport-units/

For some reason 100vh makes it scroll a little.

answered Feb 05 '18 at 16:18

Gene

10,819
1
66
58

4

100vh makes it scroll due to margin and paddings of body tag. – GreyGoat93 Jan 12 '21 at 07:22
1

That makes sense. Feel free to just edit my response. – Gene Jan 12 '21 at 17:15
4

This is not an appropriate solution. You shouldn't have to settle for setting the height to `95vh`; you need to figure out what is causing the extra scrolling and fix that. – Vince Feb 17 '22 at 19:19
1

I know this is 5 years old, but I wanted to tack on that it helped me. Thanks! – Eric E Aug 21 '22 at 15:29

score 3 · Answer 2 · answered Aug 12 '19 at 02:40

3

height: 100vh is not good idea to give it full screen.

Try min-height: 100%

answered Aug 12 '19 at 02:40

parag patel

2,933
1
10
22

2

may I ask also Why? – J.J.Enrik Dec 28 '22 at 03:00

Mostafa Ghorbani · Answer 3 · 2022-06-20T22:40:28.263

You can fix this problem by changing both height and width to 100%. In your code, you have written height as 100vh.

html,
body{
  width: 100%;
  height: 100vh;
}

after changing them both to 100% you might still be able to scroll but you can fix that by adding this:

overflow: hidden;

In general for fixing this type of problem for any project this setup I think will always work:

html,
body{
   width: 100%;
   height: 100%;
   overflow: hidden;
   margin: 0;
}

score 1 · Answer 4 · answered Dec 22 '16 at 02:36

1

If you want to completely disable the scroll then you can replace your styles with only this

html {
    overflow: hidden;
}

answered Dec 22 '16 at 02:36

Anton Kastritskiy

1,248
1
11
23

3

this removes the scroll bar and pushes the content above the view port and make it not visible. – Naveen Kumar Dec 22 '16 at 02:38
can you provide a codepen or jsfiddle with an example? – Anton Kastritskiy Dec 22 '16 at 02:39
https://jsfiddle.net/yrcgwsm7/ , The image links are not available since it was linked local. – Naveen Kumar Dec 22 '16 at 02:47

score 0 · Answer 5 · answered Dec 22 '16 at 02:54

0

You're almost there. Target both html and body and set both their width and height to 100%.

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  background: red;
}

answered Dec 22 '16 at 02:54

Wild Beard

2,919
1
12
24

It didn't work and here s the fiddle have a look at it https://jsfiddle.net/yrcgwsm7/ – Naveen Kumar Dec 22 '16 at 02:56
@NaveenKumar I am not getting a scrollbar unless I make the view port around 200px tall. – Wild Beard Dec 22 '16 at 02:59
yes that's another issue , if the view port size become less(more like mob version) the size fits in. But when the view port size increases to normal laptop size the scroll bar occurs – Naveen Kumar Dec 22 '16 at 03:22
@NaveenKumar so what exactly are you trying to do? The code I posted will set the html/body element to fill the entire available area. If you want to fit your content that's an entirely different question. If you don't want a scrollbar use `overflow: hidden;` or, set `max-width: 100%;` on whatever your containing element is so it can never extend past the available space. – Wild Beard Dec 22 '16 at 03:24
I am sorry for confusing , I want my content to fit in screen totally (without scroll bar), If i use overflow hidden and max-width:100%. Scroll bar disappears and some of my content also goes below the view port and not visible. – Naveen Kumar Dec 22 '16 at 03:29
@NaveenKumar at a certain point your content will disappear. You can't fit 300px of content into a 100px container. There's no way to really get around that. – Wild Beard Dec 22 '16 at 03:34
Funcionou para mim, obrigado – Wellington Alves Apr 30 '21 at 22:25

Sumit Wadhwa · Answer 6 · 2021-09-05T08:20:06.563

0

If body's direct child has top and bottom margin, it is going to make it scroll. So, we need to take that into account.

This works well for me:

 body {
     height: calc(100vh - 4rem);
 }

 .content {
     max-width: 98.57rem;
     margin: 2rem auto;
     box-shadow: -1px 0px 6px 0px rgba(0,0,0,0.75);
     min-height: 100%;
 }

 <body>
    <div class="content">
            ....
    </div>
</body>

edited Sep 05 '21 at 08:20

answered Sep 05 '21 at 08:14

Sumit Wadhwa

2,825
1
20
34

how to fit the webpage exactly the screen size without scrolling?

6 Answers6