how to set up a webpage so viewport is 100% minus the scrollbar

Forum Moderators: not2easy

Message Too Old, No Replies

how to set up a webpage so viewport is 100% minus the scrollbar

--scroll-bar: 8px;

Lorel

1:35 pm on Oct 7, 2020 (gmt 0)

I'm trying to set up a web page so the viewport is 100% minus the scrollbar width

I've tried multiple methods of doing this that I found on the net but nothing moves the webpage so I can see the scrollbar. There is still about 5/8 of an inch of the webpage that is hidden (on 27" monitor).

I've also tried other ideas using overflow.

Can someone let me know how to do this or point me to instructions?

I don't want to use Javascript for this.

Here is what I currently have:


body { width: calc(100vw - 17px;)
font-size: 1.000em; /* base font 16px */
font-family: Arial, Helvetica, sans-serif;
color: #000;
padding:0;
background:#FFF; }

#container {
 width: calc(100vw - 17px;)
position:relative;
padding:0;
 background-color: #FFF; }

NickMNS

1:42 pm on Oct 7, 2020 (gmt 0)

I'm not sure I fully understand what you are trying to achieve, but this may help:


body {
 width: 100%;
 margin: 0 17px 0 0;
 ...
}
#container {
 width: 100%;
 ...
}

NickMNS

1:46 pm on Oct 7, 2020 (gmt 0)

One small note. The margin width at 17px is based on your example, the 17px can be whatever width your scroll bar is. One caveat, different browsers have different scroll bar widths. You could use JS to detect the width and then adjust it dynamically, but that is a whole different can of worms.

ronin

1:50 pm on Oct 7, 2020 (gmt 0)

Desktop browsers have a 17px wide scrollbar, so this is definitely the correct way to start:

body {
 width: calc(100vw - 17px);
}

However, the same browsers also tend to give the <body> element a margin in addition to a width, so I would try:

body {
 width: calc(100vw - 17px);
 margin: 0;
}

Lorel

2:14 pm on Oct 7, 2020 (gmt 0)

Thanks all.

I was doing some tweaking with other items on the page and then the code I posted above worked. I must have had an extra margin somewhere pushing it too far.

The page now displays correctly in Firefox and Chrome but not Safari. it's only about 1100 px wide (I have a 27" monitor). Does anyone know how to fix that?

@ronin thanks. Margin:0; on body fixed that white space problem too.