0

i'm trying to fit couple of components to make each of them to take a full page i want the first component to fit all the screen (like a landing page) and to have the browser scroll bar so i can scroll down to see the second component. (i would like to add hover arrow to let the user know he can scroll down) but when i try to fit them together its showing me them on the same page. any suggestions? im using Boostrap4 and flexbox thanks.

subt
  • 29
  • 1
  • 7
  • 2
    Please provide some code of what you have tried already – Juxture Oct 03 '17 at 13:49
  • i have 2 components, and i want the first component to take the full width and height of the screen, and when i scroll down to see the second component fit the all screen width and height. that's it. when i try this i see them both in the same page. if its not clear yet ill add the code. thanks. @Juxture – subt Oct 03 '17 at 14:12

1 Answers1

0

Well if i understand correctly this should do what you want. I made a simple 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>

I used divs here, but this should not be different from your component selectors.

CSS:

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

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

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

Be sure all the wrapping tags have their height set to 100% or this will not work!

If you have any further questions, ask away.

P.S if you want a smooth scroll to the second component you can use something like this: jQuery scroll to element

Juxture
  • 253
  • 3
  • 15