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:
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>
</>
)
}
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:
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>
</>
)
}
- The map exceeded browser window before I used that style. I added it to debug after. – new Commented Jun 21, 2020 at 23:18
4 Answers
Reset to default 8Browser 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;
}
<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/en-US/docs/Web/CSS/box-sizing
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>
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.