0

tags seem to have a built-in margin, 8px for Firefox, Chrome, and Safari. While they are all consistent at 8px, it seems like this can change based on the browser vendor.

I want my page to take up 100vw and 100vh including the built-in margin, but am having trouble figuring out how to do this in a way that does not hardcode the margin. For instance:

.page-container{
  width: calc(100vw - 16px);
  height: calc(100vh - 16px);
}

This will make sure my page fills the view because the container's width + margin-left and margin-right = 100vw exactly, and same with the height. However, this relies on the built-in margin staying the same: 8px on all sides. If this changes for any reason it could make my page overflow or not fill the view.

Is there a way to rewrite this referencing the margin directly? Something like:

.page-container{
  width: calc(100vw - <body>margin-left - <body>margin-right);
  height: calc(100vh - <body>margin-top - <body>margin-bottom);
}

I searched w3schools and other css references but couldn't find this.

vball
  • 359
  • 1
  • 14
  • How about you just do a reset and remove that margin on the body and html tags? – disinfor Oct 08 '19 at 17:01
  • I want to make it browser generic and this may give issues with different sized scrollbars based on browsers. I know its unrealistic that a scrollbar will be bigger than, say, 10px, so I'd be safe overriding the margin to that, but aesthetically I want my page + scrollbar to be exactly 100vw – vball Oct 08 '19 at 17:05
  • 1
    Are you talking about the browser scroll bar, or an overflow scroll? 100vw will always be 100% of the `viewport` width. You can set the browser margin for every browser by resetting it as well. No reason to try and guess what the browser is doing, change it to your settings. – disinfor Oct 08 '19 at 17:07
  • I believe the browser scroll bar. If I set the div inside of to width/height of 100vw/100vh it overflows the and creates both horizontal and vertical scroll bars – vball Oct 08 '19 at 17:11
  • 1
    Will this work? https://www.w3schools.com/cssref/css3_pr_box-sizing.asp – Poul Bak Oct 08 '19 at 17:36

0 Answers0