为什么 {{ width: "100vw", height: "100vh"}} 比我的浏览器窗口大？（margin:0 未应用）

Question

我用 {{ width: "100vw", height: "100vh"}} 制作了一张地图，它比我的浏览器窗口大。

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

我添加了

border: "1px solid black"

来看看问题是什么，这就是我所看到的：

如您所见，地图周围有黑色边框线，周围也有白色空间。为什么当我显式地将其应用到 0 时，margin 仍然存在？

完整代码作为参考：

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>
    </>
  )
}

Answer 1

浏览器默认样式包括这些元素的间距，因此您必须从 Css 中的

<html>

和

<body>

元素中删除边距和填充：

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

Answer 2

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

你的边框1px，这意味着每边+2px。您可以尝试为您的 div 添加 box-sizing ：

box-sizing: border-box;

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

Answer 3

这个问题也让我很恼火。然后我尝试了“宽度：100%；”除了“宽度：100vw；”它起作用了。所以尝试一下，让我知道它是否适合你。

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

Answer 4

接受的答案不涵盖

的情况

{position: fixed, height: 100vh}

但是上面的代码片段似乎只覆盖了屏幕，浏览器导航栏和设备导航栏的高度会影响视口的可见部分，导致溢出。

如果需要一个元素占据整个屏幕但不溢出，请使用此：

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

这将在尊重任何缩小视口可见部分的操作系统元素的同时布局元素。

为什么 {{ width: "100vw", height: "100vh"}} 比我的浏览器窗口大？（margin:0 未应用）

问题描述投票：0回答：4

4个回答

最新问题

为什么 {{ width: "100vw", height: "100vh"}} 比我的浏览器窗口大？（margin:0 未应用）

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4