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