Question

我目前正在Angular 2网站上工作。我想要一个覆盖整个屏幕的着陆部分，一个与内部内容一样大的内容部分，一个位于底部的页脚以及一个始终保持在顶部的导航栏。

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

我当前的测试代码是：

全局CSS：

new SpinnerSegue().ExecuteAsync(this, new MyNewPage())

应用程序组件HTML和CSS：

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

。

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

还有我的Home-Component HTML / CSS：

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

。

<header></header>

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

<footer></footer>

我当前遇到的问题是，我所有的容器都比屏幕宽约10像素。因此，在底部有一个水平滚动条。奇怪的是，仅当我添加内容或页脚节时，才会出现此问题。当我只有标题时，一切都很好。导航栏也保持正确的大小。

Image of the Problem

Probalby只是一个愚蠢的小错误，但是即使使用Stack Overflow的其他解决方案，我也尝试过它仍然无法工作。

感谢您的帮助！

Answer 1

只需将宽度从宽度更改为100％：身体为100vw；如下所示：

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

内容滚动/水平溢出

1 个答案: