内容水平滚动/溢出

Question

我目前在Angular 2网站上工作。我想有一个覆盖全屏的着陆部分，一个和里面的内容一样大的内容部分，底部有一个页脚，还有一个始终位于顶部的导航栏。

我更像是一个后端开发人员，所以CSS不是我最大的优势。

我目前的测试代码是：

全球CSS：

html, body {
margin: 0px;
padding: 0px;
width: 100vw;
height: 100vh;
}

应用程序组件HTML和CSS:

<app-home></app-home>
<header>
Test
</header>

header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 50px;
color: white;
background-color: rgba(0, 0, 0, 0.8);
}

和我的家庭组件HTML/CSS:

<header></header>
<div class="content"></div>
<footer></footer>

header {
position: relative;
width: 100%;
height: 100%;
background: blue;
}
.content {
position: relative;
width: 100%;
height: 500px;
background: red;
}
footer {
position: relative;
width: 100%;
height: 50px;
background-color: yellow;
}

我目前遇到的问题是，我所有的容器都比屏幕宽10倍。因此，底部有一个水平滚动条。奇怪的是，这个问题只发生在我添加内容或页脚部分时。当我只有头的时候一切都很好。导航栏也保持在正确的大小。

问题的图像

可能这只是一个愚蠢的小错误，但即使使用Stack Overflow的其他解决方案，我也尝试过，但仍然不起作用。

我感谢你的帮助！

Answer 1

只需将宽度从车身的宽度100vw更改为100%；如下所示：

html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100vh;
}