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

Question

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

5

我使用了{{ width: "100vw", height: "100vh"}}创建了一个地图，但它比我的浏览器窗口还要大。

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

我添加了 border: "1px solid black" 来查看问题，这是我看到的：

如你所见，地图周围有黑色边框线，同时还有白色空白区域包围。为什么当我明确将边距设置为 0 后，边距仍然存在呢？

完整代码供参考：

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

- new

在使用那个样式之前，地图超出了浏览器窗口。我之后添加了它进行调试。 - new

4个回答

4

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

如果你的边框为1px，那么每侧会增加2px。你可以尝试将box-sizing属性添加到你的div中:

box-sizing: border-box;

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

- Arthur Rubens

谢谢你的回答。我尝试了，但是由于某些原因，React不接受它。（＃1 js） - new

1

boxSizing: "border-box" - Arthur Rubens

2

这个问题也曾经困扰着我。后来我尝试了"width: 100%;"而不是"width: 100vw;"，结果有效了。所以你也可以试试，如果对你有用，请告诉我。

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

- Khawaja Haider

这可能对你有用。但这不是正确的答案。如果它起作用，那么它在技术上并没有错。但通常容器是嵌套的，如果包含您组件的容器小于100vw，使用100％将无法呈现完整的浏览器宽度。 - BonisTech

几乎可以工作，但只有在将高度设置为90vh后才得到完美的适配。 - Ovi Oprea

-1

被接受的答案并未涵盖这种情况

{display: fixed, height: "100vh}

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

如果需要一个占据整个屏幕但不会溢出的元素，请使用以下代码：

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

这将布置元素，并尊重任何操作系统元素，缩小视口的可见部分。

- Amartya Mishra

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hans Spieß · Accepted Answer

浏览器默认样式包含这些元素的间距，因此您需要从Css中删除<html>和<body>元素的边距和填充:

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