1. Home
  2. Knowledge Base
  3. Posts Table Pro
  4. FAQ

How to change the container height for infinite scroll

When you enable infinite scroll, the table loads more rows automatically as the visitor scrolls. Instead of growing taller and taller down the page, the table sits inside a fixed-height area that the visitor scrolls within. The Container height setting controls how tall that area is.

The default container height is 70vh, which is 70% of the height of the browser window. That works well for most sites, so you only need to change it if you want the table to fit a specific space in your layout.

How to change the container height

Enable infinite scroll on the plugin settings page or in your table, and a Container height field appears. Enter any valid CSS length unit, for example 500px or 70vh.

If you create your tables with a shortcode, you can set the same value using the infinite_height option, e.g. [posts_table infinite_scroll="true" infinite_height="500px"]. If you enter a plain number with no unit, it is treated as pixels. If you enter a value that isn't a valid CSS length, it falls back to the 70vh default.

Available units

You can use any of the following CSS length units. In practice, most people use px, %, vh or calc().

Fixed units

Set a specific height. px is an exact pixel height, while em and rem are based on the font size.

  • px – pixels, e.g. 500px
  • em – relative to the font size of the table, e.g. 30em
  • rem – relative to the font size of your site, e.g. 30rem

Relative units

Scale based on the size of the browser window or the surrounding container.

  • % – a percentage of the parent element's height, e.g. 50%
  • vh – a percentage of the viewport (browser window) height, e.g. 100vh is the full screen height
  • vw – a percentage of the viewport width, e.g. 50vw
  • vmin – a percentage of the smaller of the viewport's width or height
  • vmax – a percentage of the larger of the viewport's width or height
  • dvh – like vh, but accounts for mobile browser toolbars appearing and disappearing
  • svh – the "small" viewport height (as if the mobile toolbars are showing)
  • lvh – the "large" viewport height (as if the mobile toolbars are hidden)
  • ch – relative to the width of the "0" character in the current font
  • ex – relative to the height of the lowercase "x" in the current font

Calculated values

  • calc() – combines units with simple maths, e.g. calc(100vh - 80px) sets the height to the full window height minus an 80-pixel header

Related Articles

If searching the knowledge base hasn't answered your question, please contact support.