video设置高度100vh会出现滚动条

如果video设置高度为100vh出现了滚动条，那么很可能是video的父元素或祖先元素设置了padding或margin，导致了整体高度超出了视口高度。

解决方法可以尝试给video元素的父元素或祖先元素设置box-sizing: border-box;，这样padding和border不会撑开元素的大小，从而避免滚动条出现。另外也可以给body元素设置margin: 0;来去掉默认的页面边距。

例如：

html,
body {
  height: 100%;
  margin: 0;
}

.parent {
  box-sizing: border-box;
  padding: 20px;
}

video {
  height: 100%;
  width: 100%;
}

这样设置可以将video元素的高度设置为100vh，并且避免出现滚动条。

相关问题

video设置高度100vh

这是一个CSS的代码，用于将一个video元素的高度设置为屏幕高度的100%。vh是一个CSS单位，表示视口高度的百分比。下面是代码示例：

video {
  height: 100vh;
}

这将使video元素的高度与设备屏幕的高度相同，无论屏幕尺寸如何。

vue video 视频和设置的高度不一致

如果在 Vue 中使用 `<video>` 标签时，视频的高度与设置的高度不一致，可能是由于 CSS 样式或视频的宽高比导致的。

首先，确保在设置视频的高度时，没有被其他 CSS 样式所覆盖或修改。你可以使用开发者工具检查元素样式，确认是否有其他样式影响了视频的高度。

另外，视频的宽高比也可能导致高度与设置不一致。默认情况下，视频会按照原始宽高比进行缩放。如果你设置了固定的宽度，但没有设置高度，视频可能会根据宽高比自动调整高度，导致与你设置的高度不一致。你可以通过设置 `object-fit` 属性来控制视频的缩放行为。

例如，将 `<video>` 标签包裹在一个容器中，并为容器设置固定的高度和宽度：

<div style="width: 400px; height: 300px;">
  <video src="your-video-url" style="object-fit: fill; width: 100%; height: 100%;"></video>
</div>

上述代码中，我们使用一个 `<div>` 容器，并为容器设置了固定的宽度和高度。然后，在 `<video>` 标签中，使用 `object-fit: fill;` 来填充整个容器，并通过设置 `width: 100%; height: 100%;` 来将视频的宽度和高度设置为容器的宽度和高度。

通过上述方式，你可以实现视频的高度与设置的高度一致。根据你的实际需求，你可以调整容器和视频的宽度、高度以及 `object-fit` 属性来达到期望的效果。