: How do you create divs below the fold in Adobe Edge Reflow? When designing in Adobe Edge Reflow, how do you create divs that start below the fold? Using this site as an example, after you

@Pope1402555

As DA01 said, it's about making the content above equal to the height of the viewport.

I haven't used Edge Reflow (and only mucked about a bit with a version of Edge when it was in beta), so I don't know if there are any Edge Reflow specific commands to make it happen. I'm just installing it now to have a play with, and see if I can discern an answer.

Meanwhile...

What you want done can't be done with just CSS. You have to use Javascript.

In jQuery, you can get the height of the viewport with:

var viewportHeight = $( window ).height();


Then you assign that to the height of the element you want:

$( "#divAboveTheFold" ).css( 'height', viewportHeight + "px");


In the example above, you would've assigned an id of "divAboveTheFold" to the element in your html markup that you want to take up the full height of the viewport at the top of your page.

If you have any detailed questions about how to use Javascript / jQuery, you're probably better off searching/asking on StackOverflow.

Things to bear in mind:


If you have top or bottom padding applied to the #divAboveTheFold ,
then you have to subtract them from the viewportHeight before you
assign it to #divAbovTheFold .
You would want to make sure this resizing happens not just when the
page loads, but also on browser resize.
If #divAboveTheFold has more content than can fit vertically in the space you've allowed, then the content will be cut off.
Not all devices report the correct viewportHeight, such as Mobile Safari.


There are probably other issues you'll run into as well.

Unless making your top div the height of the viewport is mission critical to your design, I'd probably just leave it.



UPDATE

I've just had a look at Edge Reflow. It doesn't support Javascript, so the answer to your question is:

You can't do what you want to do in Adobe Edge Reflow.

Vote Up Vote Down