css - Angular2组件如何适应同一个页面？

Question

我正在尝试调整几个组件，使每个组件都能占据整页我希望第一个组件适合所有屏幕(如登陆页面)并拥有浏览器滚动条，以便我可以向下滚动以查看第二个组件。 (我想添加悬停箭头让用户知道他可以向下滚动)但是当我尝试将它们组合在一起时，它会在同一页面上显示它们。有什么建议么？我正在使用 Boostrap4 和 flexbox谢谢。

Answer 1

好吧，如果我理解正确，这应该可以满足您的要求。我做了一个简单的 fiddle : https://jsfiddle.net/o1uwahL8/

HTML:

<div id="componentOne">
  Component 1

  <div>
     <a href="#componentTwo">Go to two</a>
  </div>
</div>

<div id="componentTwo">
  Component 2
</div>

我在这里使用了 div，但这应该与您的组件选择器没有什么不同。

CSS:

body, html {
  height: 100%;
  width: 100%;
}

#componentOne {
  height: 100%;
  width: 100%;
  background-color: red;
}

#componentTwo {
  height: 100%;
  width: 100%;
  background-color: yellow;
}

确保所有包装标签的高度都设置为 100%，否则这将不起作用!

如果您有任何其他问题，请提出。

P.S 如果你想平滑滚动到第二个组件，你可以使用这样的东西:jQuery scroll to element