Web Export
  • Introduction
  • Getting Started
  • Install the Plugin
  • Create or open a project
  • Export the Artboard
  • Export Artboard Dialog
    • File Name
    • Subdirectory
    • Page Title
    • Web Page Template
    • Expected HTML Output
    • Stylesheet Name
    • Artboard Stylesheet template
    • Expected Stylesheet output
    • Script Page options
    • Images
    • Export Folder
    • Server
    • Alternative Fonts
    • Scale to fit
    • Centering the page
    • Styles Inline
    • Style via Classes
    • Markup Only
    • Outline Elements
    • Keyboard Navigation
    • Add Data Name
    • Add Image Compare
    • Auto Refresh
    • Export type
    • Reset Artboard
  • Addressing Export Issues
  • Messages Console
  • Export types
    • Export to a Single Page
    • Export to Multiple Pages
    • Export Artboards and show by size (media query)
    • Export to a Slideshow
  • Keyboard Shortcuts
  • Responsive Pages
  • Dynamical page that grows in height
  • Modifying Individual Elements
  • Elements and Sub Elements
  • Styling elements
  • Element Options
    • Id field
    • Tag Name
    • Styles
    • Classes
    • Attributes
    • Hyperlink
    • Width and Height Size
    • Background
    • Markup Inside
    • Markup Before and Markup After
    • Text Ids
    • Text Tokens
    • Row Layout
    • Column Layout
    • Overflow
    • Script Template
    • CSS Template
    • HTML Template
    • Layout Section
      • Layout Position types
      • Layout Position Location Types
      • Layout sizing options
    • Centered, Constraint and Anchored Positioning
    • Debug Element
    • Show Outline
    • Export as Image
    • Export as String
    • Export element
    • Displayed
    • Auto Export
    • Export (artboard)
    • Show Markup
    • Show CSS
    • Show Property Changes
    • Reset All Property changes
    • Navigation Buttons
  • Changed Properties
  • How to section
    • Creating a hover menu
    • Centering a page or element
    • Showing Overlays
    • Embedding an HTML page
    • Linking to pages or views
    • Creating a download link
    • Creating List items
    • Embedding Fonts
    • Adding Hover Effects
    • Styling Hyperlinks
    • Showing elements by size
    • Creating a Fixed Header
    • Make a Stretchable Line
    • Blend Modes
  • Creating Code Blocks
  • How Exporting Works
  • Single Page Application API
  • Element Tokens
  • Template Tokens
  • Setting up a server
  • Putting your site online
  • Code Block Snippets
    • Adding a cursor over on hover
    • Go to next or previous artboard with swipe gesture
  • Other Features
    • Gradients
    • Blend Modes
    • Form Elements
  • Learning by Videos
  • WordPress Integration
    • Summary
    • Export the main page
  • Example Packages
  • Web Developers
  • Non Web Developers
  • Debugging
  • Version
  • Support
    • Forums
    • Discord Channel
  • License
  • Feature and Bug Reports
  • Related Plugins
Powered by GitBook
On this page
  • Methods of growth
  • Relative positioning and height
  • Column or Row layout
  • Stack Layout
  • Dynamic Page Height Project
  • Example Video Guide

Was this helpful?

Dynamical page that grows in height

A page using normal flow to allow it to grow in height

PreviousResponsive PagesNextModifying Individual Elements

Last updated 3 years ago

Was this helpful?

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 .

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:

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.

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

Setting -height to remove the height style using the field

Setting field to auto

Using the list to only export width values (excluding height values)

For any issues please post in the .

normal flow
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow
Styles
height
sizing options
forums
Logoxd-examples/web-export/examples/dynamic-page-height at master · velara3/xd-examplesGitHub
Dynamic page height
Only width of element will be exported