Assigning a Div so its Position is Relative to a Different Div (static footer)

(Jonathan Langberg) #1

For context to the original post I published relating to this new post, [click here][1]. In summary of the original post, I wanted to target the header (element ID: hero) of a web page to make it fill whatever size your browser is stretched to. You can do this within Hype, but you can’t have content below it to scroll down to if you do it without extra code. Someone gave me a fix for this problem, which was to enter the following into the head HTML:


#hero {
    height: 100vh !important;

It worked great for the most part, go here to see: The only problem is, the div below the header (element ID: secondDiv) is a set position from the top, so there is always a different amount of space in between the "hero" div (the header) and the ***“secondDiv”***. Test it out to see what I mean… Stretch the browser to one size, observe the distance in between the two divs, then stretch it to a different size and the distance will be different. I want to make it so that the “secondDiv” always stays relative to the bottom of the “hero” div.

OnePager with Full Responsive StartScreen
Creating a fullscreen "Hero" DIV for your site header
(Hans-Gerd Claßen) #2

this is your third thread on the same topic … let’s say you’re quite resistant for help :wink: sry :smile:

will this fit your needs¿ link

it’s a hack and will NOT be supported: (48.2 KB)

to work with built-in abilities i would go the way to create a responsive starting scene and on wheelscroll switch to the content-scene which appears from bottom to top:)

Creating a fullscreen "Hero" DIV for your site header
(Jonathan Langberg) #3

So sorry! I misinterpreted your first comment in the other thread, that solves the problem perfectly, thank you so much!


(Hans-Gerd Claßen) #4

excuse me, didn’t meant to be unfriendly …

(Jonathan Langberg) #5

I didn’t think you were being unfriendly! This has been something I have been wanting to do for a while within Hype but couldn’t figure it out, so I really appreciate your help!


Also, using

.HYPE_scene {
    overflow-y: visible !important;

as a style declaration in the Head HTML works but @h_classen Hans, does the JS do anything else? I mean would the CSS solution not work in some cases?


(Hans-Gerd Claßen) #7

it’s just that a persistant symbol is also of class HYPE_scene. so you’ve got to exclude :slight_smile: no matter how … as the easiest solution should be preferred and i’m always to complicated :slight_smile:


ahh. ok good to know. :wink:


(Jonathan Langberg) #9

So this solution worked great as I mentioned, but now the “momentum” scrolling is not working. Is there a work around for this?

(Hans-Gerd Claßen) #10

search for css property overflow-touch. you’ll find answers here :slight_smile: or www

(Jonathan Langberg) #11

I tried inserting the following into the Head HTML, but it did not fix the problem:

	.module {
  width: 300px;
  height: 200px;

  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;



have you tried “!important” after the property value? to be safe.

(Jonathan Langberg) #13

The overflow touch problem that came about was fixed from the posts that were left on this forum. However, there are a couple other little things that have gone wrong as a result of the “hero” header:

  1. The scrollbar cuts off the overflow content on the right side of the screen. For instance, scroll down to the bottom of the page and see that the boxed arrow on the bottom right-hand corner is cutoff.

  2. When I run a $.scrollTo( ‘#top’, 800); function so that the page smoothly scrolls back to the top, it no longer works.

Any solutions to fix these?