Angular2组件如何适合同一页面?

时间:2017-10-03 13:46:45

标签: css html5 angular flexbox twitter-bootstrap-4

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

1 个答案:

答案 0 :(得分:1)

如果我理解正确,这应该做你想要的。我做了一个简单的小提琴: 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