Dynamical page that grows in height
A page using normal flow to allow it to grow in height
In pages that have dynamic content the content will stretch beyond its bounds. In other words it will grow in height. This is usually done using normal flow.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow
There are a few other newer layout types like flex box and grid that also allow the page to grow (and push elements beneath them down at the same time so there are no overlaps).
The main way to do this is two or three part.
Do not set an explicit height on any element or group that you want to grow.
Do not use a layout on groups or descendent elements that you want to grow. Use a type of layout that grows and flows with other elements
Use padding or margin if you need to position in the layout
You can use some absolute positioned elements but have at least one element in a group using relative positioning as a sizing element. Usually the tallest element or the one that will grow the tallest.
Methods of growth
There are a few ways to do this.
Relative positioning and height
By default web pages will grow in height when relative layout is specified.
You can make each element relatively positioned with no layout and no height and each relative item will stack down the page from top to bottom.
You must order them in the order you want in the Layers panel.
You must remove the height for items that grow and remove layout options.
Column or Row layout
You can also use a column layout where each item element can dynamically resize to fit.
The elements that you want to stretch should be set to column and the height set to none.
When you switch to column layout each direct descendant of the column layout group becomes a column item.
Use column layout and column item layout to position them or wrap them in a group to get absolute layout.
Stack Layout
You can also use the Stack Layout option. Select the group that you want to grow and then in the Adobe XD property panel enable Vertical Stack layout:
Set the spacing if you so choose and then open the Web Export Element Options panel and select Stack layout:
Next, prevent the group from defining a height. In other words, if you want a group or page to grow do not tell the browser it should 500 px high.
You can do this by selecting the group and doing one of the following options:
Setting
-heightto remove the height style using the Styles fieldSetting height field to
autoUsing the sizing options list to only export width values (excluding height values)
Using the sizing option looks like this:
Next, make sure any descendant element of the group that will grow in height also does not define a height.
Make the elements that need to grow use the relative position. You can set this with the layout option:
For positioning inside use the margins or padding options:
Or if the element is flush left or full width use the No layout values option.
Right now this seems like a lot to remember.
Once you get it working a few times it will go much quicker.
Just remember, you're telling the artboard or group that is has the freedom to grow. So for each element you have to remove the height limits, follow a few layout rules (or use Adobe XD Stacks which enforces those rules), and tell items to position themselves relative to each other.
In the near future there will possibly be a Web Export macros feature that will to help automate this process to a few button clicks.
For any issues please post in the forums.
Dynamic Page Height Project
There is an example project in the examples repository here.
Example Video Guide
This is an older video walking through setting up a dynamic page height. There have been some changes that make this process easier.
Basically, the new changes are that the Element Properties panel will now show property changes. you can select predefined sizing types from a dropdown list, and you can select predefined positiong typ
Last updated
