When designing in Adobe Edge Reflow, how do you create divs that start below the fold? Using this site as an example, after you created the top level purple screen, how would you create and position the next screen down with the cream colored background?

  • It's not that it starts 'below the fold' but that the div above just happens to be as tall as your screen. Remember, there is no magic 'fold' in a web page, so it will always be somewhat arbitrary where you decide it is.
    – DA01
    Jan 13, 2014 at 17:19

1 Answer 1


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.


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.


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.

  • It doesn't support JavaScript!? I find that a) sad, but also b) believable. Sigh :)
    – DA01
    Jan 14, 2014 at 5:42
  • Edge Reflow seems to be used purely for generating CSS (with a focus on responsive design). Edge Code does HTML, CSS and Javascript. The reason they've broken it up into two programs is because... well... um... yeah, no idea :) Jan 14, 2014 at 5:53
  • Huh. Maybe I should play with it again, but I can't say it sounds promising. Actually sounds like a step backwards from DreamWeaver (which was never that great at code anyways...)
    – DA01
    Jan 14, 2014 at 5:54
  • I had a quick look, and it apparently integrates with Photoshop to allow you to make quick 'live action' comps from your PS designs. html.adobe.com/edge/reflow/photoshop-plug-in.html. Although I don't think I'd use it to generate production code. Jan 14, 2014 at 6:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.