CODEWITHSUNDEEP
javascripthtmlcssreactjs
new
new

Reputation: 377

Why is {{ width: "100vw", height: "100vh"}} bigger than my browser window?(margin:0 not being applied)

I made a map with {{ width: "100vw", height: "100vh"}}, and it is bigger than my browser window.

<div id="map" style={{ width: "100vw", height: "100vh", margin: "0", padding: "0"}}></div>

I added border: "1px solid black" to see what is the problem, and this is what I saw:

enter image description here

As you can see, there is black border line around the map, and then white space surrounding it too. Why does margin still exist when I explicitly applied it to 0?

Whole code as reference:

export default function Home(props){
  useEffect(() => {
    let container = document.getElementById('map');
    let options = {
      center: new window.kakao.maps.LatLng(33.450701, 126.570667),
      level: 3
    };
  
    let map = new window.kakao.maps.Map(container, options);
  
  }, [])
  return (
    <>
    <div id="map" style={{ width: "100vw", height: "100vh", margin: "0", padding: "0", border: "1px solid black"}}></div>
    </>
  )
}

Upvotes: 7

Views: 10615

Answers (4)

Amartya Mishra
Amartya Mishra

Reputation: 164

The accepted answer does not cover the case of

{position: fixed, height: 100vh}

however the above snippet seems to cover only the screen, the height of the browser navBar and device navigation bar will impact the visible part of viewport leading to overflow.

If an element is required that takes the whole screen but doesn't overflow use this:

{position: fixed, top:0, bottom:0, left:0, right:0}

This will lay out the element while respecting any OS element shrinking the visible part of the viewport.

Upvotes: -1

Khawaja Haider
Khawaja Haider

Reputation: 25

This problem was also irritating me. Then I tried "width: 100%;" except "width: 100vw;" and it worked. So try it and let me know if it works for you laso.

<div id="map" style="width: 100%; height: 100vh;"></div>

Upvotes: 1

Arthur Rubens
Arthur Rubens

Reputation: 4706

<div id="map" style={{ ... border: "1px solid black"}}></div>

Your borders 1px, it means +2px on each side. You can try to add box-sizing to your div:

box-sizing: border-box;

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Upvotes: 4

Hans Spie&#223;
Hans Spie&#223;

Reputation: 935

Browser default styles include spacing for those elements, so you have to remove margin and padding from the <html> and <body> elements in your Css:

html,
body {
   margin: 0;
   padding: 0;
}

Upvotes: 8

Related Questions