diff --git a/src/components/DataDictionary/components/Filters/constants.ts b/src/components/DataDictionary/components/Filters/constants.ts
new file mode 100644
index 000000000..cced904e7
--- /dev/null
+++ b/src/components/DataDictionary/components/Filters/constants.ts
@@ -0,0 +1,4 @@
+// Stable class name stamped on the data dictionary filters grid, so the filters
+// layout can target it without `:first-child`, which Emotion's server render
+// makes unreliable (inline <style> elements precede the grid).
+export const FILTERS_CLASS_NAME = "data-dictionary-filters";
diff --git a/src/components/DataDictionary/components/Filters/filters.tsx b/src/components/DataDictionary/components/Filters/filters.tsx
index a50dae8e4..92311e19d 100644
--- a/src/components/DataDictionary/components/Filters/filters.tsx
+++ b/src/components/DataDictionary/components/Filters/filters.tsx
@@ -3,11 +3,13 @@ import { JSX } from "react";
 import { Attribute } from "../../../../common/entities";
 import { GlobalFilter } from "../../../Table/components/TableFeatures/GlobalFilter/globalFilter";
 import { ColumnFilters } from "./components/ColumnFilters/columnFilters";
+import { FILTERS_CLASS_NAME } from "./constants";
 import { StyledGrid } from "./filters.styles";
 import { FiltersProps } from "./types";
 
 /**
  * Data dictionary filters: a global search over all attributes, followed by the column filters.
+ * The grid carries `FILTERS_CLASS_NAME`, so the filters layout can target it.
  * @param props - Component props.
  * @param props.table - TanStack table instance.
  * @returns The filters.
@@ -16,7 +18,7 @@ export const Filters = <T extends RowData = Attribute>({
   table,
 }: FiltersProps<T>): JSX.Element => {
   return (
-    <StyledGrid>
+    <StyledGrid className={FILTERS_CLASS_NAME}>
       <GlobalFilter placeholder="Search all attributes..." table={table} />
       <ColumnFilters table={table} />
     </StyledGrid>
diff --git a/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.ts b/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.ts
index 224c745d4..8cc9a761b 100644
--- a/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.ts
+++ b/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.ts
@@ -1,23 +1,18 @@
 import styled from "@emotion/styled";
-import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 import { bpDown1024 } from "../../../../../../styles/common/mixins/breakpoints";
 import { LAYOUT_SPACING } from "../../constants";
 
 const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.CONTENT_PADDING_TOP; /* top padding */
 
-export const Layout = styled("div")<LayoutSpacing>`
+export const Layout = styled("div")`
   display: grid;
   gap: 16px;
-  grid-column: 2;
-  grid-row: 1;
+  grid-area: entities; /* follows the filters, so its position needs no measurement */
   padding-bottom: ${PB}px;
-  padding-top: ${({ top }) => top}px;
   z-index: 1; /* not required, but helpful in that the entities are always on top */
 
   ${bpDown1024} {
-    grid-column: 1;
-    grid-row: auto;
     padding-top: ${PT}px;
   }
 `;
diff --git a/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.tsx b/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.tsx
index 776f32419..9b0e7904a 100644
--- a/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.tsx
+++ b/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.tsx
@@ -3,20 +3,19 @@ import { Layout } from "./entitiesLayout.styles";
 import { EntitiesLayoutProps } from "./types";
 
 /**
- * Layout for the data dictionary entities, padded at the top to sit below the header and the sticky filters.
+ * Layout for the data dictionary entities, in the grid row below the sticky filters.
  * @param props - Component props.
  * @param props.children - Entities content.
- * @param props.spacing - Layout spacing.
  * @param ref - Ref forwarded to the layout element.
  * @returns The entities layout.
  */
 export const EntitiesLayout = forwardRef<HTMLDivElement, EntitiesLayoutProps>(
   function EntitiesLayout(
-    { children, spacing, ...props }: EntitiesLayoutProps,
+    { children, ...props }: EntitiesLayoutProps,
     ref,
   ): JSX.Element {
     return (
-      <Layout ref={ref} {...spacing} {...props}>
+      <Layout ref={ref} {...props}>
         {children}
       </Layout>
     );
diff --git a/src/components/DataDictionary/components/Layout/components/EntitiesLayout/types.ts b/src/components/DataDictionary/components/Layout/components/EntitiesLayout/types.ts
index 799310255..11fc07ff6 100644
--- a/src/components/DataDictionary/components/Layout/components/EntitiesLayout/types.ts
+++ b/src/components/DataDictionary/components/Layout/components/EntitiesLayout/types.ts
@@ -1,11 +1,9 @@
 import { CSSProperties, ReactNode } from "react";
-import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 
 /**
  * Props for the EntitiesLayout component.
  */
 export interface EntitiesLayoutProps {
   children: ReactNode;
-  spacing: LayoutSpacing;
   style?: CSSProperties; // Required for Fade component. See https://mui.com/material-ui/transitions/#child-requirement.
 }
diff --git a/src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles.ts b/src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles.ts
index 9b435db83..f8f80d620 100644
--- a/src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles.ts
+++ b/src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles.ts
@@ -1,34 +1,42 @@
 import styled from "@emotion/styled";
-import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 import { PALETTE } from "../../../../../../styles/common/constants/palette";
 import {
-  bpDown1024,
   bpDownSm,
+  bpUp1024,
 } from "../../../../../../styles/common/mixins/breakpoints";
-import { LAYOUT_SPACING } from "../../constants";
+import {
+  pinned,
+  pinnedFocus,
+} from "../../../../../../styles/common/mixins/pinned";
+import { FILTERS_CLASS_NAME } from "../../../Filters/constants";
+import { LAYOUT_SPACING, TITLE_BOTTOM } from "../../constants";
 
 const PB = LAYOUT_SPACING.FILTERS_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.FILTERS_PADDING_TOP; /* top padding */
-const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
 
-export const Layout = styled("div")<LayoutSpacing>`
-  align-self: flex-start;
+export const Layout = styled("div")`
   background-color: ${PALETTE.BACKGROUND_DEFAULT};
   display: grid;
   gap: 12px;
-  grid-column: 2;
-  grid-row: 1;
-  padding-bottom: ${PB}px;
-  padding-top: ${({ top }) => top + TITLE_HEIGHT + PT}px;
-  position: sticky;
-  top: 0;
+  grid-area: filters;
   z-index: 2; /* required, filters should be on top of entities */
 
-  ${bpDown1024} {
-    grid-column: 1;
-    grid-row: auto;
-    padding-top: ${PT}px;
-    position: relative;
+  /* Spacing sits on the children, so a dictionary with no filters collapses the band to nothing. */
+  > .${FILTERS_CLASS_NAME} {
+    margin-top: ${PT}px;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  > :last-child {
+    margin-bottom: ${PB}px;
+  }
+
+  ${bpUp1024} {
+    ${pinned(TITLE_BOTTOM)}; /* below the sticky title */
+    ${pinnedFocus};
   }
 
   ${bpDownSm} {
diff --git a/src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.tsx b/src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.tsx
index 4389dd7d2..4b3a45d5f 100644
--- a/src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.tsx
+++ b/src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.tsx
@@ -4,7 +4,7 @@ import { FiltersLayoutProps } from "./types";
 
 /**
  * Layout for the data dictionary filters, sticky below the header and title; at narrow widths it is not sticky.
- * @param props - Component props, the layout spacing plus children.
+ * @param props - Component props.
  * @param props.children - Filters content.
  * @param ref - Ref forwarded to the layout element.
  * @returns The filters layout.
diff --git a/src/components/DataDictionary/components/Layout/components/FiltersLayout/types.ts b/src/components/DataDictionary/components/Layout/components/FiltersLayout/types.ts
index 73555bcc2..ea968e537 100644
--- a/src/components/DataDictionary/components/Layout/components/FiltersLayout/types.ts
+++ b/src/components/DataDictionary/components/Layout/components/FiltersLayout/types.ts
@@ -1,9 +1,8 @@
 import { ReactNode } from "react";
-import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 
 /**
  * Props for the FiltersLayout component.
  */
-export interface FiltersLayoutProps extends LayoutSpacing {
+export interface FiltersLayoutProps {
   children: ReactNode;
 }
diff --git a/src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.ts b/src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.ts
index 3e0d27fb8..2af199824 100644
--- a/src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.ts
+++ b/src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.ts
@@ -1,23 +1,22 @@
 import styled from "@emotion/styled";
-import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 import { bpDown1024 } from "../../../../../../styles/common/mixins/breakpoints";
-import { LAYOUT_SPACING } from "../../constants";
+import { pinned } from "../../../../../../styles/common/mixins/pinned";
+import { FOOTER_HEIGHT_VAR } from "../../../../../Layout/components/Footer/common/constants";
+import { LAYOUT_SPACING, TITLE_BOTTOM } from "../../constants";
 
 const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
 const PT = LAYOUT_SPACING.OUTLINE_PADDING_TOP; /* top padding */
-const TITLE_HEIGHT = LAYOUT_SPACING.TITLE_HEIGHT; /* title height */
 
-export const Layout = styled("div")<LayoutSpacing>`
-  grid-column: 1;
-  grid-row: 1;
-  margin-bottom: ${({ bottom }) =>
-    -bottom}px; /* required; prevents sticky element from scrolling when footer scrolls into viewport */
-  max-height: 100vh;
+export const Layout = styled("div")`
+  grid-area: outline;
+  margin-bottom: calc(
+    -1 * ${FOOTER_HEIGHT_VAR}
+  ); /* with the matching padding, keeps the outline pinned whole while the footer scrolls into view */
+  max-height: calc(100vh - ${TITLE_BOTTOM});
   overflow: hidden;
-  padding-bottom: ${({ bottom }) => bottom}px; /* footer height */
-  padding-top: ${({ top }) => top + TITLE_HEIGHT + PT}px;
-  position: sticky;
-  top: 0;
+  padding-bottom: ${FOOTER_HEIGHT_VAR};
+  padding-top: ${PT}px;
+  ${pinned(TITLE_BOTTOM)}; /* below the sticky title */
 
   ${bpDown1024} {
     display: none;
diff --git a/src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.tsx b/src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.tsx
index 702c31954..12727cc03 100644
--- a/src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.tsx
+++ b/src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.tsx
@@ -4,7 +4,7 @@ import { OutlineLayoutProps } from "./types";
 
 /**
  * Scrollable layout for the data dictionary outline, sticky below the header and title and clear of the footer; hidden at narrow widths.
- * @param props - Component props, the layout spacing plus children.
+ * @param props - Component props.
  * @param props.children - Outline content.
  * @returns The outline layout.
  */
diff --git a/src/components/DataDictionary/components/Layout/components/OutlineLayout/types.ts b/src/components/DataDictionary/components/Layout/components/OutlineLayout/types.ts
index c3a7c3af2..f465b7f8d 100644
--- a/src/components/DataDictionary/components/Layout/components/OutlineLayout/types.ts
+++ b/src/components/DataDictionary/components/Layout/components/OutlineLayout/types.ts
@@ -1,9 +1,8 @@
 import { ReactNode } from "react";
-import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 
 /**
  * Props for the OutlineLayout component.
  */
-export interface OutlineLayoutProps extends LayoutSpacing {
+export interface OutlineLayoutProps {
   children: ReactNode;
 }
diff --git a/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.ts b/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.ts
index 49130c028..a509fd043 100644
--- a/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.ts
+++ b/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.ts
@@ -1,23 +1,32 @@
 import styled from "@emotion/styled";
-import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
 import {
-  bpDown1024,
   bpDownSm,
+  bpUp1024,
 } from "../../../../../../styles/common/mixins/breakpoints";
+import {
+  pinned,
+  pinnedFocus,
+} from "../../../../../../styles/common/mixins/pinned";
+import { HEADER_HEIGHT_VAR } from "../../../../../Layout/components/Header/common/constants";
 
-export const Layout = styled("div")<LayoutSpacing>`
-  grid-column: 1 / -1;
-  grid-row: 1;
-  height: fit-content;
-  padding-top: ${({ top }) => top}px; /* header height */
-  position: sticky;
-  top: 0;
+export const Layout = styled("div")`
+  background-color: ${PALETTE.BACKGROUND_DEFAULT};
+  grid-area: title;
+  min-width: 0;
   z-index: 4;
 
-  ${bpDown1024} {
-    grid-column: 1;
-    grid-row: auto;
-    position: relative;
+  /* From 1024px up the title fills a fixed-height grid row, so it pins below the header and a long title truncates rather than wrapping under the filters. */
+  ${bpUp1024} {
+    ${pinned(HEADER_HEIGHT_VAR)};
+    ${pinnedFocus};
+    overflow: hidden; /* a custom title taller than the row is clipped, never painted over the filters */
+
+    > * {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   ${bpDownSm} {
diff --git a/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.tsx b/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.tsx
index ffb28ad1e..a6970b649 100644
--- a/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.tsx
+++ b/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.tsx
@@ -4,7 +4,7 @@ import { TitleLayoutProps } from "./types";
 
 /**
  * Layout for the data dictionary title, sticky below the header; at narrow widths it is not sticky.
- * @param props - Component props, the layout spacing plus children.
+ * @param props - Component props.
  * @param props.children - Title content.
  * @returns The title layout.
  */
diff --git a/src/components/DataDictionary/components/Layout/components/TitleLayout/types.ts b/src/components/DataDictionary/components/Layout/components/TitleLayout/types.ts
index fc5bbb98e..76d7d5bc9 100644
--- a/src/components/DataDictionary/components/Layout/components/TitleLayout/types.ts
+++ b/src/components/DataDictionary/components/Layout/components/TitleLayout/types.ts
@@ -1,9 +1,8 @@
 import { ReactNode } from "react";
-import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 
 /**
  * Props for the TitleLayout component.
  */
-export interface TitleLayoutProps extends LayoutSpacing {
+export interface TitleLayoutProps {
   children: ReactNode;
 }
diff --git a/src/components/DataDictionary/components/Layout/constants.ts b/src/components/DataDictionary/components/Layout/constants.ts
index 402ba35cd..0a506feca 100644
--- a/src/components/DataDictionary/components/Layout/constants.ts
+++ b/src/components/DataDictionary/components/Layout/constants.ts
@@ -1,3 +1,5 @@
+import { HEADER_HEIGHT_VAR } from "../../../Layout/components/Header/common/constants";
+
 export const LAYOUT_SPACING = {
   CONTENT_PADDING_BOTTOM: 24,
   CONTENT_PADDING_TOP: 16,
@@ -7,3 +9,17 @@ export const LAYOUT_SPACING = {
   OUTLINE_PADDING_TOP: 16,
   TITLE_HEIGHT: 74,
 };
+
+/**
+ * Height of the filters with no filter tags, which targets scroll to clear
+ * before the filters are measured.
+ */
+export const FILTERS_FALLBACK_HEIGHT =
+  LAYOUT_SPACING.FILTERS_PADDING_TOP +
+  LAYOUT_SPACING.FILTERS_HEIGHT +
+  LAYOUT_SPACING.FILTERS_PADDING_BOTTOM;
+
+/**
+ * Where the filters and outline pin: below the sticky header and the title row.
+ */
+export const TITLE_BOTTOM = `calc(${HEADER_HEIGHT_VAR} + ${LAYOUT_SPACING.TITLE_HEIGHT}px)`;
diff --git a/src/components/DataDictionary/dataDictionary.styles.ts b/src/components/DataDictionary/dataDictionary.styles.ts
index 336fd5d1f..a39e85860 100644
--- a/src/components/DataDictionary/dataDictionary.styles.ts
+++ b/src/components/DataDictionary/dataDictionary.styles.ts
@@ -1,16 +1,62 @@
+import type { SerializedStyles, Theme } from "@emotion/react";
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { bpDown1024, bpDownSm } from "../../styles/common/mixins/breakpoints";
+import { PROPERTY } from "../../hooks/useHtmlStyle/constants";
+import {
+  bpDown1024,
+  bpDownSm,
+  bpUp1024,
+} from "../../styles/common/mixins/breakpoints";
+import {
+  FILTERS_FALLBACK_HEIGHT,
+  LAYOUT_SPACING,
+  TITLE_BOTTOM,
+} from "./components/Layout/constants";
+
+/**
+ * Server-rendered scroll-padding-top, so from 1024px up a deep link clears the
+ * sticky header, title and filters on first load. Until they are measured, the
+ * header falls back to its height without announcements and the filters to
+ * their height without tags. Below 1024px the title and filters scroll with the
+ * page, so the header's own scroll-padding-top applies. `:root` outranks the
+ * header's `html` rule.
+ * @param theme - MUI theme.
+ * @returns Global scroll-padding-top styles.
+ */
+export const scrollPadding = (theme: Theme): SerializedStyles => css`
+  ${bpUp1024({ theme })} {
+    :root {
+      scroll-padding-top: calc(
+        ${TITLE_BOTTOM} +
+          var(
+            ${PROPERTY.DATA_DICTIONARY_FILTERS_HEIGHT},
+            ${FILTERS_FALLBACK_HEIGHT}px
+          )
+      );
+    }
+  }
+`;
 
 export const View = styled("div")`
   column-gap: 24px;
   display: grid;
   flex: 1;
+  grid-template-areas:
+    "title title"
+    "outline filters"
+    "outline entities";
   grid-template-columns: 242px 1fr;
+  grid-template-rows: ${LAYOUT_SPACING.TITLE_HEIGHT}px auto 1fr;
   margin: 0 24px;
   position: relative;
 
   ${bpDown1024} {
+    grid-template-areas:
+      "title"
+      "filters"
+      "entities";
     grid-template-columns: 1fr;
+    grid-template-rows: none;
     margin: 0 16px;
   }
 
diff --git a/src/components/DataDictionary/dataDictionary.tsx b/src/components/DataDictionary/dataDictionary.tsx
index 6c5c07b98..6ae3ad1d3 100644
--- a/src/components/DataDictionary/dataDictionary.tsx
+++ b/src/components/DataDictionary/dataDictionary.tsx
@@ -1,3 +1,4 @@
+import { Global } from "@emotion/react";
 import { Fade } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
 import { JSX, useMemo } from "react";
@@ -5,9 +6,8 @@ import { Attribute } from "../../common/entities";
 import { isColumnFilter } from "../../common/filters/adapters/tanstack/typeGuards";
 import { useValidateFilterKeys } from "../../common/filters/hooks/UseValidateFilterKeys/hook";
 import { PROPERTY } from "../../hooks/useHtmlStyle/constants";
-import { useHtmlStyle } from "../../hooks/useHtmlStyle/hook";
-import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
 import { DATA_DICTIONARY_URL_PARAMS } from "../../providers/dataDictionaryState/dictionaries/constants";
+import { useLayoutHeight } from "../Layout/hooks/UseLayoutHeight/hook";
 import { Description } from "./components/Description/description";
 import { Entities } from "./components/Entities/entities";
 import { ColumnFilterTags } from "./components/Filters/components/ColumnFilterTags/columnFilterTags";
@@ -20,17 +20,17 @@ import { Outline as DefaultOutline } from "./components/Outline/outline";
 import { buildClassesOutline } from "./components/Outline/utils";
 import { useTable } from "./components/Table/hook";
 import { Title as DefaultTitle } from "./components/Title/title";
-import { View } from "./dataDictionary.styles";
+import { scrollPadding, View } from "./dataDictionary.styles";
 import { useDataDictionaryConfig } from "./hooks/UseDataDictionaryConfig/hook";
-import { useMeasureFilters } from "./hooks/UseMeasureFilters/hook";
 import { DataDictionaryProps } from "./types";
 import { extractColumnId, getValidColumnIds } from "./utils";
 
 /**
  * Data dictionary view: the title, the outline of classes, the filters with their tags, and the description and entities.
  * Throws during render when no configured data dictionary has a matching path, or when the column filters URL param is malformed or names an unknown column.
- * Sets the HTML scroll-padding-top to the filters height.
- * Fades in once the header is measured, and the entities fade in once the filters are measured.
+ * From 1024px up, a grid of title, outline, filters and entities areas: the title pins below the header in a fixed-height row (a long title truncates), and the outline and filters pin below the title.
+ * The filters are measured once mounted, for the HTML scroll-padding-top, with a server-rendered fallback until then.
+ * The entities fade in once the filters are measured, after hydration, because the server render of the table differs from the client.
  * @param props - Component props.
  * @param props.className - Class name applied to the view.
  * @param props.dictionary - Data dictionary path, matched against the configured data dictionaries.
@@ -56,13 +56,10 @@ export const DataDictionary = <T extends RowData = Attribute>({
   const { classes, description, tableOptions, title } =
     useDataDictionaryConfig<T>(dictionary);
 
-  // Layout measurements.
-  // Get header and footer dimensions.
-  const { spacing } = useLayoutSpacing();
-  // Measure filters dimensions.
-  const { dimensions, filtersRef } = useMeasureFilters();
-  // Update entities' spacing with filters dimensions.
-  const entitiesSpacing = { ...spacing, top: dimensions.height };
+  // Measure the filters; their height clears deep links below the sticky filters.
+  const { isMeasured, ref: filtersRef } = useLayoutHeight<HTMLDivElement>(
+    PROPERTY.DATA_DICTIONARY_FILTERS_HEIGHT,
+  );
 
   // Table instance.
   const table = useTable<T>(dictionary, classes, tableOptions);
@@ -80,32 +77,26 @@ export const DataDictionary = <T extends RowData = Attribute>({
   // Dictionary outline.
   const outline = buildClassesOutline<T>(table);
 
-  // Update scroll-padding-top on the HTML element.
-  // Scroll-snaps table rows to below the sticky filters.
-  useHtmlStyle(PROPERTY.SCROLL_PADDING_TOP, `${dimensions.height}px`);
-
   return (
-    <Fade in={spacing.top > 0}>
-      {/* Fade in when header is measured. */}
-      <View className={className}>
-        <TitleLayout {...spacing}>
-          <Title>{title}</Title>
-        </TitleLayout>
-        <OutlineLayout {...spacing}>
-          <Outline outline={outline} />
-        </OutlineLayout>
-        <FiltersLayout ref={filtersRef} {...spacing}>
-          <Filters table={table} />
-          <ColumnFilterTags table={table} />
-        </FiltersLayout>
-        <Fade in={dimensions.height > 0}>
-          {/* Fade in entities when filters are measured. */}
-          <EntitiesLayout spacing={entitiesSpacing}>
-            <Description description={description} />
-            <Entities table={table} />
-          </EntitiesLayout>
-        </Fade>
-      </View>
-    </Fade>
+    <View className={className}>
+      <Global styles={scrollPadding} />
+      <TitleLayout>
+        <Title>{title}</Title>
+      </TitleLayout>
+      <OutlineLayout>
+        <Outline outline={outline} />
+      </OutlineLayout>
+      <FiltersLayout ref={filtersRef}>
+        <Filters table={table} />
+        <ColumnFilterTags table={table} />
+      </FiltersLayout>
+      <Fade in={isMeasured}>
+        {/* Fade in entities after hydration, once the filters are measured. */}
+        <EntitiesLayout>
+          <Description description={description} />
+          <Entities table={table} />
+        </EntitiesLayout>
+      </Fade>
+    </View>
   );
 };
diff --git a/src/components/DataDictionary/hooks/UseMeasureFilters/hook.ts b/src/components/DataDictionary/hooks/UseMeasureFilters/hook.ts
deleted file mode 100644
index 966940c65..000000000
--- a/src/components/DataDictionary/hooks/UseMeasureFilters/hook.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useRef } from "react";
-import {
-  getBorderBoxSizeHeight,
-  useResizeObserver,
-} from "../../../../hooks/useResizeObserver";
-import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
-import { UseMeasureFilters } from "./types";
-
-/**
- * Measures the height of the data dictionary filters, once the header has been measured.
- * @returns The filters ref and height; the height is 0 until measured.
- */
-export const useMeasureFilters = (): UseMeasureFilters => {
-  // Get header dimensions.
-  const { dimensions } = useLayoutDimensions();
-  const { header } = dimensions;
-
-  // Measure filters dimensions.
-  const filtersRef = useRef<HTMLElement>(null);
-  const filtersRect = useResizeObserver(
-    filtersRef,
-    getBorderBoxSizeHeight,
-    header.height > 0, // Only measure filters height, when header measurement is available.
-  );
-  const { height = 0 } = filtersRect || {};
-
-  return {
-    dimensions: { height },
-    filtersRef,
-  };
-};
diff --git a/src/components/DataDictionary/hooks/UseMeasureFilters/types.ts b/src/components/DataDictionary/hooks/UseMeasureFilters/types.ts
deleted file mode 100644
index ca1eeaff5..000000000
--- a/src/components/DataDictionary/hooks/UseMeasureFilters/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { RefObject } from "react";
-
-/**
- * Return type for the useMeasureFilters hook.
- */
-export interface UseMeasureFilters {
-  dimensions: { height: number };
-  filtersRef: RefObject<HTMLElement | null>;
-}
diff --git a/src/components/Error/error.styles.ts b/src/components/Error/error.styles.ts
index 19ae3ee0c..13fa383fd 100644
--- a/src/components/Error/error.styles.ts
+++ b/src/components/Error/error.styles.ts
@@ -3,15 +3,8 @@ import { FONT } from "../../styles/common/constants/font";
 import { bpUpSm } from "../../styles/common/mixins/breakpoints";
 import { Section, sectionMarginXsm } from "../common/Section/section.styles";
 
-interface Props {
-  offset: number;
-}
-
-export const ErrorLayout = styled("div", {
-  shouldForwardProp: (prop) => prop !== "offset",
-})<Props>`
+export const ErrorLayout = styled.div`
   flex: 1;
-  margin-top: ${({ offset }) => offset}px;
 `;
 
 export const Error = styled.div`
diff --git a/src/components/Error/error.tsx b/src/components/Error/error.tsx
index 8072aecee..fa6fcec16 100644
--- a/src/components/Error/error.tsx
+++ b/src/components/Error/error.tsx
@@ -3,7 +3,6 @@ import Link from "next/link";
 import { JSX } from "react";
 import { useExploreState } from "../../hooks/useExploreState";
 import { ExploreActionKind } from "../../providers/exploreState";
-import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
 import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
 import { ButtonPrimary } from "../common/Button/components/ButtonPrimary/buttonPrimary";
 import { AlertIcon } from "../common/CustomIcon/components/AlertIcon/alertIcon";
@@ -78,7 +77,6 @@ export const Error = ({
   rootPath,
 }: ErrorProps): JSX.Element => {
   const { exploreDispatch } = useExploreState();
-  const { dimensions } = useLayoutDimensions();
 
   const handleToHomePageClicked = (): void => {
     // Explicitly clear the caught error so recovery also works when "To
@@ -94,7 +92,7 @@ export const Error = ({
   };
 
   return (
-    <ErrorLayout offset={dimensions.header.height}>
+    <ErrorLayout>
       <CustomError>
         <ErrorSection>
           <StatusIcon priority={PRIORITY.HIGH} StatusIcon={AlertIcon} />
diff --git a/src/components/Index/indexView.styles.ts b/src/components/Index/indexView.styles.ts
index 103acf3fd..1ee864227 100644
--- a/src/components/Index/indexView.styles.ts
+++ b/src/components/Index/indexView.styles.ts
@@ -1,21 +1,23 @@
 import styled from "@emotion/styled";
 import { Grid } from "@mui/material";
-import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
 import { PALETTE } from "../../styles/common/constants/palette";
-import { bpDownSm } from "../../styles/common/mixins/breakpoints";
+import { bpDownMd, bpDownSm } from "../../styles/common/mixins/breakpoints";
 import { FluidPaper } from "../common/Paper/components/FluidPaper/fluidPaper";
+import { HEADER_HEIGHT_VAR } from "../Layout/components/Header/common/constants";
 
-export const StyledGridEntityView = styled(Grid, {
-  shouldForwardProp: (prop) => prop !== "bottom" && prop !== "top",
-})<LayoutSpacing>`
+export const StyledGridEntityView = styled(Grid)`
   align-content: flex-start;
   display: grid;
   flex: 1;
   gap: 0;
+  contain: size; /* fills the main row without growing it, so the page fits the window */
   height: 100%;
-  max-height: 100vh;
   overflow: hidden;
-  padding-top: ${({ top }) => top}px;
+
+  /* Below md the footer is too tall to keep on screen: fill the window below the header and let the footer follow. */
+  ${bpDownMd} {
+    height: calc(100vh - ${HEADER_HEIGHT_VAR});
+  }
 `;
 
 export const StyledGridEntityLayout = styled(Grid)`
diff --git a/src/components/Index/indexView.tsx b/src/components/Index/indexView.tsx
index cab631a1a..3f154ef5f 100644
--- a/src/components/Index/indexView.tsx
+++ b/src/components/Index/indexView.tsx
@@ -1,6 +1,5 @@
 import { Grid } from "@mui/material";
 import { JSX } from "react";
-import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
 import { ActionButton } from "./components/EntityView/components/controls/ActionButton/actionButton";
 import { ExportButton } from "./components/EntityView/components/controls/ExportButton/exportButton";
 import { FilterButton } from "./components/EntityView/components/controls/FilterButton/filterButton";
@@ -42,10 +41,9 @@ export const Index = ({
   loading,
 }: IndexProps): JSX.Element => {
   const { onChange, viewMode, viewStatus } = useViewToggle();
-  const { spacing } = useLayoutSpacing();
   const { table } = useTable({ entityListType });
   return (
-    <StyledGridEntityView className={className} {...spacing}>
+    <StyledGridEntityView className={className}>
       {/* Entity view alerts or other */}
       <EntityViewSlot />
       {/* Entity layout */}
diff --git a/src/components/Layout/components/AppLayout/appLayout.styles.ts b/src/components/Layout/components/AppLayout/appLayout.styles.ts
index c1722ab88..83674f9ab 100644
--- a/src/components/Layout/components/AppLayout/appLayout.styles.ts
+++ b/src/components/Layout/components/AppLayout/appLayout.styles.ts
@@ -1,8 +1,26 @@
 import styled from "@emotion/styled";
 
+/**
+ * Grows with the page, so the sticky header stays pinned on long pages. A grid
+ * rather than a flex column so the main row's height is definite: percentage
+ * heights below it (e.g. `height: 100%` views) still fill the space between
+ * the header and footer.
+ */
 export const AppLayout = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto 1fr auto;
   min-height: 100vh;
+
+  > header {
+    grid-row: 1;
+  }
+
+  > main {
+    grid-row: 2;
+  }
+
+  > footer {
+    grid-row: 3;
+  }
 `;
diff --git a/src/components/Layout/components/ContentLayout/components/Main/main.tsx b/src/components/Layout/components/ContentLayout/components/Main/main.tsx
index eb81203a8..16519b86f 100644
--- a/src/components/Layout/components/ContentLayout/components/Main/main.tsx
+++ b/src/components/Layout/components/ContentLayout/components/Main/main.tsx
@@ -1,5 +1,5 @@
 import { JSX, ReactNode } from "react";
-import { Main as ContentMain } from "../../../Main/main.styles";
+import { StyledMain as ContentMain } from "../../../Main/main.styles";
 
 /**
  * Props for the Main component.
diff --git a/src/components/Layout/components/ContentLayout/contentLayout.styles.ts b/src/components/Layout/components/ContentLayout/contentLayout.styles.ts
index e5889b30a..2a1cef2fd 100644
--- a/src/components/Layout/components/ContentLayout/contentLayout.styles.ts
+++ b/src/components/Layout/components/ContentLayout/contentLayout.styles.ts
@@ -6,6 +6,8 @@ import {
   bpUp1366,
   bpUpMd,
 } from "../../../../styles/common/mixins/breakpoints";
+import { pinned } from "../../../../styles/common/mixins/pinned";
+import { HEADER_HEIGHT_VAR } from "../Header/common/constants";
 import { PanelBackgroundColor } from "./common/entities";
 
 const CONTENT_MAX_WIDTH = 756;
@@ -26,7 +28,6 @@ interface LayoutProps {
 }
 
 interface GridProps {
-  headerHeight: number;
   panelColor?: PanelBackgroundColor;
 }
 
@@ -63,25 +64,12 @@ export const ContentLayout = styled.div<LayoutProps>`
   }
 `;
 
-const content = ({ headerHeight, panelColor }: GridProps) => css`
+const panel = ({ panelColor }: GridProps) => css`
   background-color: ${getPanelBackgroundColor(panelColor)};
-  padding-top: ${headerHeight}px;
-`;
-
-const navigation = ({ panelColor }: GridProps) => css`
-  background-color: ${getPanelBackgroundColor(panelColor)};
-`;
-
-const positioner = ({ headerHeight }: GridProps) => css`
-  max-height: 100vh;
-  overflow: auto;
-  padding-top: ${headerHeight}px;
-  position: sticky;
-  top: 0;
 `;
 
 export const NavigationGrid = styled.div<GridProps>`
-  ${navigation};
+  ${panel};
   box-shadow: inset -1px 0 ${PALETTE.SMOKE_MAIN};
   display: none;
   grid-area: navigation;
@@ -92,13 +80,13 @@ export const NavigationGrid = styled.div<GridProps>`
 `;
 
 export const ContentGrid = styled.div<GridProps>`
-  ${content};
+  ${panel};
   grid-area: content;
   min-width: 0;
 `;
 
 export const OutlineGrid = styled("div")<GridProps>`
-  ${navigation};
+  ${panel};
   display: none;
   grid-area: outline;
 
@@ -107,8 +95,10 @@ export const OutlineGrid = styled("div")<GridProps>`
   }
 `;
 
-export const Positioner = styled.div<GridProps>`
-  ${positioner};
+export const Positioner = styled.div`
+  max-height: calc(100vh - ${HEADER_HEIGHT_VAR});
+  overflow: auto;
+  ${pinned(HEADER_HEIGHT_VAR)};
 `;
 
 export const Navigation = styled.div`
diff --git a/src/components/Layout/components/ContentLayout/contentLayout.tsx b/src/components/Layout/components/ContentLayout/contentLayout.tsx
index eb9154c28..09677c27e 100644
--- a/src/components/Layout/components/ContentLayout/contentLayout.tsx
+++ b/src/components/Layout/components/ContentLayout/contentLayout.tsx
@@ -1,6 +1,5 @@
 import { useRouter } from "next/router";
 import { JSX, ReactNode } from "react";
-import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { BaseComponentProps } from "../../../types";
 import { LayoutStyle } from "./common/entities";
 import {
@@ -26,7 +25,7 @@ export interface ContentLayoutProps {
 
 /**
  * Content page layout, rendering the content between optional navigation and outline panels.
- * The navigation and outline panels are positioned below the header, and the outline remounts when the path (excluding the hash) changes.
+ * The navigation and outline panels pin below the sticky header, and the outline remounts when the path (excluding the hash) changes.
  * @param props - Component props.
  * @param props.className - Class name applied to the layout.
  * @param props.content - Page content.
@@ -43,7 +42,6 @@ export const ContentLayout = ({
   outline,
 }: BaseComponentProps & ContentLayoutProps): JSX.Element => {
   const { asPath } = useRouter();
-  const { dimensions } = useLayoutDimensions();
   return (
     <Layout
       className={className}
@@ -51,28 +49,21 @@ export const ContentLayout = ({
       panelColor={layoutStyle?.content}
     >
       {navigation && (
-        <NavigationGrid
-          headerHeight={dimensions.header.height}
-          panelColor={layoutStyle?.navigation}
-        >
-          <Positioner headerHeight={dimensions.header.height}>
+        <NavigationGrid panelColor={layoutStyle?.navigation}>
+          <Positioner>
             <Navigation>{navigation}</Navigation>
           </Positioner>
         </NavigationGrid>
       )}
-      <ContentGrid
-        headerHeight={dimensions.header.height}
-        panelColor={layoutStyle?.content}
-      >
+      <ContentGrid panelColor={layoutStyle?.content}>
         <Content>{content}</Content>
       </ContentGrid>
       {outline && (
         <OutlineGrid
           key={getOutlineKey(asPath)}
-          headerHeight={dimensions.header.height}
           panelColor={layoutStyle?.outline}
         >
-          <Positioner headerHeight={dimensions.header.height}>
+          <Positioner>
             <Outline>{outline}</Outline>
           </Positioner>
         </OutlineGrid>
diff --git a/src/components/Layout/components/Footer/common/constants.ts b/src/components/Layout/components/Footer/common/constants.ts
new file mode 100644
index 000000000..d13efa159
--- /dev/null
+++ b/src/components/Layout/components/Footer/common/constants.ts
@@ -0,0 +1,10 @@
+import { PROPERTY } from "../../../../../hooks/useHtmlStyle/constants";
+
+export const FOOTER_HEIGHT = 56;
+
+/**
+ * Footer height as a CSS value. Reads the measured height from the
+ * `--footer-height` custom property, falling back to the footer's toolbar
+ * height (from the "sm" breakpoint up) until the footer is measured.
+ */
+export const FOOTER_HEIGHT_VAR = `var(${PROPERTY.FOOTER_HEIGHT}, ${FOOTER_HEIGHT}px)`;
diff --git a/src/components/Layout/components/Footer/footer.styles.ts b/src/components/Layout/components/Footer/footer.styles.ts
index d07c3feee..f268d112d 100644
--- a/src/components/Layout/components/Footer/footer.styles.ts
+++ b/src/components/Layout/components/Footer/footer.styles.ts
@@ -5,6 +5,7 @@ import { PALETTE } from "../../../../styles/common/constants/palette";
 import { bpUpSm } from "../../../../styles/common/mixins/breakpoints";
 import { Socials as DXSocials } from "../../../common/Socials/socials";
 import { Link as DXLink } from "../../../Links/components/Link/link";
+import { FOOTER_HEIGHT } from "./common/constants";
 
 export const AppBar = styled(MAppBar)`
   padding: 16px 0;
@@ -26,7 +27,7 @@ export const AppBar = styled(MAppBar)`
       align-items: center;
       flex-direction: row;
       gap: unset;
-      min-height: 56px;
+      min-height: ${FOOTER_HEIGHT}px;
     }
   }
 ` as typeof MAppBar;
diff --git a/src/components/Layout/components/Footer/footer.tsx b/src/components/Layout/components/Footer/footer.tsx
index f150b9bd6..2f65de378 100644
--- a/src/components/Layout/components/Footer/footer.tsx
+++ b/src/components/Layout/components/Footer/footer.tsx
@@ -1,11 +1,12 @@
 import { Toolbar } from "@mui/material";
 import { JSX, ReactNode } from "react";
 import { SELECTOR } from "../../../../common/selectors";
-import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
+import { PROPERTY } from "../../../../hooks/useHtmlStyle/constants";
 import { Social } from "../../../common/Socials/socials";
 import { StaticImageProps } from "../../../common/StaticImage/staticImage";
 import { ANCHOR_TARGET } from "../../../Links/common/entities";
 import { isNodeBoolean } from "../../../utils";
+import { useLayoutHeight } from "../../hooks/UseLayoutHeight/hook";
 import { NavLinkItem } from "../Header/components/Content/components/Navigation/navigation";
 import { PoweredByCleverCanary } from "./components/PoweredByCleverCanary/poweredByCleverCanary";
 import { VersionInfo } from "./components/VersionInfo/versionInfo";
@@ -43,7 +44,7 @@ export const Footer = ({
   socials,
   versionInfo,
 }: FooterProps): JSX.Element => {
-  const { footerRef } = useLayoutDimensions();
+  const { ref: footerRef } = useLayoutHeight(PROPERTY.FOOTER_HEIGHT);
   return (
     <AppBar
       className={className}
diff --git a/src/components/Layout/components/Header/common/constants.ts b/src/components/Layout/components/Header/common/constants.ts
index e90c74d56..9666f5d20 100644
--- a/src/components/Layout/components/Header/common/constants.ts
+++ b/src/components/Layout/components/Header/common/constants.ts
@@ -2,12 +2,25 @@ import {
   AppBarProps as MAppBarProps,
   ToolbarProps as MToolbarProps,
 } from "@mui/material";
+import { PROPERTY } from "../../../../../hooks/useHtmlStyle/constants";
 
 export const HEADER_HEIGHT = 56;
 
+/**
+ * Header height as a CSS value, for elements that pin below the sticky header.
+ * Reads the measured height from the `--header-height` custom property, falling
+ * back to the toolbar height plus the app bar's 1px bottom border until the
+ * header is measured.
+ */
+export const HEADER_HEIGHT_VAR = `var(${PROPERTY.HEADER_HEIGHT}, ${HEADER_HEIGHT + 1}px)`;
+
+/**
+ * Sticky keeps the header in flow, so content follows it whatever its height,
+ * including any announcements, and it pins to the top once the page scrolls.
+ */
 export const APP_BAR_PROPS: Partial<MAppBarProps> = {
   elevation: 1,
-  position: "fixed",
+  position: "sticky",
 };
 
 export const FADE_TRANSITION_PROPS = {
diff --git a/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.styles.ts b/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.styles.ts
index b9c536d0d..1f08aea47 100644
--- a/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.styles.ts
+++ b/src/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.styles.ts
@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
 import { MenuItem as MMenuItem, Popper as MPopper } from "@mui/material";
 import { PALETTE } from "../../../../../../../../../../styles/common/constants/palette";
 import { Button as DXButton } from "../../../../../../../../../common/Button/button";
+import { HEADER_HEIGHT_VAR } from "../../../../../../common/constants";
 
 interface Props {
   isActive: boolean;
@@ -14,7 +15,9 @@ export const StyledPopper = styled(MPopper)`
   .MuiPaper-menu {
     border-color: ${PALETTE.SMOKE_MAIN};
     margin: 4px 0;
-    max-height: calc(100vh - 96px);
+    max-height: calc(
+      100vh - ${HEADER_HEIGHT_VAR} - 40px
+    ); /* below the header, with room above the window edge */
     max-width: 324px;
     min-width: 204px;
     overflow-y: auto;
diff --git a/src/components/Layout/components/Header/header.styles.ts b/src/components/Layout/components/Header/header.styles.ts
index 2562436fa..b52d7ab47 100644
--- a/src/components/Layout/components/Header/header.styles.ts
+++ b/src/components/Layout/components/Header/header.styles.ts
@@ -2,16 +2,29 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { AppBar as MAppBar } from "@mui/material";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import { HEADER_HEIGHT } from "./common/constants";
+import { pinnedFocus } from "../../../../styles/common/mixins/pinned";
+import { HEADER_HEIGHT, HEADER_HEIGHT_VAR } from "./common/constants";
 
 // See https://github.com/emotion-js/emotion/issues/1105.
 // See https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Fcache%4011.10.2.
 const ignoreSsrWarning =
   "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */";
 
+/**
+ * Clears the sticky header when the page scrolls to a target: hash links,
+ * focus and scrollIntoView. Server-rendered, so it applies on first load.
+ */
+export const scrollPadding = css`
+  html {
+    scroll-padding-top: ${HEADER_HEIGHT_VAR};
+  }
+`;
+
 export const AppBar = styled(MAppBar)`
   border-bottom: 1px solid ${PALETTE.SMOKE_MAIN};
 
+  ${pinnedFocus};
+
   &.MuiPaper-elevation0 {
     border-bottom: 1px solid transparent;
   }
diff --git a/src/components/Layout/components/Header/header.tsx b/src/components/Layout/components/Header/header.tsx
index ab979e6a4..c85535161 100644
--- a/src/components/Layout/components/Header/header.tsx
+++ b/src/components/Layout/components/Header/header.tsx
@@ -1,9 +1,11 @@
+import { Global } from "@emotion/react";
 import { Fade, Toolbar } from "@mui/material";
 import { usePathname } from "next/navigation";
 import { JSX, ReactNode } from "react";
 import { SELECTOR } from "../../../../common/selectors";
 import { ComponentsConfig } from "../../../../config/entities";
-import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
+import { PROPERTY } from "../../../../hooks/useHtmlStyle/constants";
+import { useLayoutHeight } from "../../hooks/UseLayoutHeight/hook";
 import {
   APP_BAR_PROPS,
   FADE_TRANSITION_PROPS,
@@ -20,7 +22,7 @@ import { Navigation as DXNavigation } from "./components/Content/components/Navi
 import { Slogan } from "./components/Content/components/Slogan/slogan";
 import { Divider } from "./components/Content/components/Slogan/slogan.styles";
 import { Socials } from "./components/Content/components/Socials/socials.styles";
-import { AppBar, Center, Left, Right } from "./header.styles";
+import { AppBar, Center, Left, Right, scrollPadding } from "./header.styles";
 import { useHeaderNavigation } from "./hooks/useHeaderNavigation";
 import { useHeaderVisibility } from "./hooks/useHeaderVisibility";
 import { useMenu } from "./hooks/useMenu";
@@ -59,7 +61,7 @@ export interface HeaderProps {
 export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
   const { navigation } = useHeaderNavigation(headerProps);
   const { isIn } = useHeaderVisibility({ ...headerProps, navigation });
-  const { headerRef } = useLayoutDimensions();
+  const { ref: headerRef } = useLayoutHeight(PROPERTY.HEADER_HEIGHT);
   const { onClose, onOpen, open } = useMenu();
   const pathname = usePathname() ?? "";
   const {
@@ -80,89 +82,92 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
   };
 
   return (
-    <AppBar
-      {...APP_BAR_PROPS}
-      className={className}
-      id={SELECTOR.HEADER}
-      ref={headerRef}
-    >
-      {/* Announcements */}
-      <Announcements announcements={announcements} />
-      {/* Toolbar */}
-      <Toolbar {...TOOLBAR_PROPS}>
-        {/* Left group */}
-        <Fade {...FADE_TRANSITION_PROPS} in={isIn.isLeftGroupIn}>
-          <Left>
-            {/* Logo */}
-            {logo}
-            {/* Divider */}
-            {isIn.isSloganIn && <Divider flexItem orientation="vertical" />}
-            {/* Slogan */}
-            {isIn.isSloganIn && <Slogan slogan={slogan} />}
-            {/* Left navigation */}
-            {isIn.isLeftNavigationIn && (
-              <DXNavigation {...navigationProps} links={navItemsL} />
-            )}
-          </Left>
-        </Fade>
-        {/* Center group */}
-        <Fade {...FADE_TRANSITION_PROPS} in={isIn.isCenterGroupIn}>
-          <Center>
-            {/* Center navigation */}
-            {isIn.isCenterNavigationIn && (
-              <DXNavigation
-                {...navigationProps}
-                testId={NAVIGATION_TEST_ID}
-                links={navItemsC}
-              />
-            )}
-          </Center>
-        </Fade>
-        {/* Right group */}
-        <Fade {...FADE_TRANSITION_PROPS} in={isIn.isRightGroupIn}>
-          <Right>
-            {/* Navigation */}
-            {isIn.isRightNavigationIn && (
-              <DXNavigation {...navigationProps} links={navItemsR} />
-            )}
-            {/* Socials */}
-            {isIn.isSocialsIn && (
-              <Socials
-                buttonSize="small"
-                socials={socialMedia?.socials || []}
-              />
-            )}
-            {/* Actions */}
-            {isIn.isActionsIn && (
-              <Actions>
-                {/* Search */}
-                <Search
-                  closeMenu={onClose}
-                  isMenuIn={isIn.isMenuIn}
-                  searchEnabled={searchEnabled}
-                  searchURL={searchURL}
-                />
-                {/* Authentication */}
-                <Authentication
-                  authenticationEnabled={authenticationEnabled}
-                  closeMenu={onClose}
-                  isMenuIn={isIn.isMenuIn}
-                />
-                {/* Additional actions i.e. call-to-action button */}
-                {actions}
-                {/* Menu */}
-                <Menu
+    <>
+      <Global styles={scrollPadding} />
+      <AppBar
+        {...APP_BAR_PROPS}
+        className={className}
+        id={SELECTOR.HEADER}
+        ref={headerRef}
+      >
+        {/* Announcements */}
+        <Announcements announcements={announcements} />
+        {/* Toolbar */}
+        <Toolbar {...TOOLBAR_PROPS}>
+          {/* Left group */}
+          <Fade {...FADE_TRANSITION_PROPS} in={isIn.isLeftGroupIn}>
+            <Left>
+              {/* Logo */}
+              {logo}
+              {/* Divider */}
+              {isIn.isSloganIn && <Divider flexItem orientation="vertical" />}
+              {/* Slogan */}
+              {isIn.isSloganIn && <Slogan slogan={slogan} />}
+              {/* Left navigation */}
+              {isIn.isLeftNavigationIn && (
+                <DXNavigation {...navigationProps} links={navItemsL} />
+              )}
+            </Left>
+          </Fade>
+          {/* Center group */}
+          <Fade {...FADE_TRANSITION_PROPS} in={isIn.isCenterGroupIn}>
+            <Center>
+              {/* Center navigation */}
+              {isIn.isCenterNavigationIn && (
+                <DXNavigation
                   {...navigationProps}
-                  closeMenu={onClose}
-                  isMenuIn={isIn.isMenuIn}
-                  open={open}
-                  openMenu={onOpen}
+                  testId={NAVIGATION_TEST_ID}
+                  links={navItemsC}
+                />
+              )}
+            </Center>
+          </Fade>
+          {/* Right group */}
+          <Fade {...FADE_TRANSITION_PROPS} in={isIn.isRightGroupIn}>
+            <Right>
+              {/* Navigation */}
+              {isIn.isRightNavigationIn && (
+                <DXNavigation {...navigationProps} links={navItemsR} />
+              )}
+              {/* Socials */}
+              {isIn.isSocialsIn && (
+                <Socials
+                  buttonSize="small"
+                  socials={socialMedia?.socials || []}
                 />
-              </Actions>
-            )}
-          </Right>
-        </Fade>
-      </Toolbar>
-    </AppBar>
+              )}
+              {/* Actions */}
+              {isIn.isActionsIn && (
+                <Actions>
+                  {/* Search */}
+                  <Search
+                    closeMenu={onClose}
+                    isMenuIn={isIn.isMenuIn}
+                    searchEnabled={searchEnabled}
+                    searchURL={searchURL}
+                  />
+                  {/* Authentication */}
+                  <Authentication
+                    authenticationEnabled={authenticationEnabled}
+                    closeMenu={onClose}
+                    isMenuIn={isIn.isMenuIn}
+                  />
+                  {/* Additional actions i.e. call-to-action button */}
+                  {actions}
+                  {/* Menu */}
+                  <Menu
+                    {...navigationProps}
+                    closeMenu={onClose}
+                    isMenuIn={isIn.isMenuIn}
+                    open={open}
+                    openMenu={onOpen}
+                  />
+                </Actions>
+              )}
+            </Right>
+          </Fade>
+        </Toolbar>
+      </AppBar>
+    </>
   );
 };
diff --git a/src/components/Layout/components/Main/main.styles.ts b/src/components/Layout/components/Main/main.styles.ts
index acb9ea69b..cad0e828e 100644
--- a/src/components/Layout/components/Main/main.styles.ts
+++ b/src/components/Layout/components/Main/main.styles.ts
@@ -1,20 +1,7 @@
-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
-interface Props {
-  offset: number;
-}
-
-const main = css`
+export const StyledMain = styled("main")`
   align-items: flex-start;
   display: flex;
   flex: 1;
 `;
-
-export const Main = styled("main")`
-  ${main};
-`;
-
-export const MainWithOffset = styled(Main)<Props>`
-  margin-top: ${({ offset }) => offset}px;
-`;
diff --git a/src/components/Layout/components/Main/main.tsx b/src/components/Layout/components/Main/main.tsx
index b81a508d4..6f02e601a 100644
--- a/src/components/Layout/components/Main/main.tsx
+++ b/src/components/Layout/components/Main/main.tsx
@@ -1,6 +1,5 @@
 import { JSX, ReactNode } from "react";
-import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
-import { MainWithOffset } from "./main.styles";
+import { StyledMain } from "./main.styles";
 
 /**
  * Props for the Main component.
@@ -11,17 +10,12 @@ export interface MainProps {
 }
 
 /**
- * Main content, offset by the header height.
+ * Main content. Follows the in-flow header, so it carries no header offset.
  * @param props - Component props.
  * @param props.children - Main content.
  * @param props.className - Class name applied to the main element.
  * @returns The main content.
  */
 export const Main = ({ children, className }: MainProps): JSX.Element => {
-  const { dimensions } = useLayoutDimensions();
-  return (
-    <MainWithOffset className={className} offset={dimensions.header.height}>
-      {children}
-    </MainWithOffset>
-  );
+  return <StyledMain className={className}>{children}</StyledMain>;
 };
diff --git a/src/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.ts b/src/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.ts
index 6d9ae0561..544590e95 100644
--- a/src/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.ts
+++ b/src/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.ts
@@ -1,21 +1,18 @@
 import styled from "@emotion/styled";
 import { bpUpMd } from "../../../../../../styles/common/mixins/breakpoints";
+import { pinned } from "../../../../../../styles/common/mixins/pinned";
+import { HEADER_HEIGHT_VAR } from "../../../Header/common/constants";
 
-interface Props {
-  headerHeight: number;
-}
-
-export const SidebarPositioner = styled("div")<Props>`
+export const SidebarPositioner = styled("div")`
   box-sizing: border-box;
   height: 100%;
   overflow: visible;
   padding: 16px 0;
 
   ${bpUpMd} {
-    max-height: 100vh;
+    max-height: calc(100vh - ${HEADER_HEIGHT_VAR});
     overflow: auto;
-    padding: ${({ headerHeight }) => headerHeight}px 0 0;
-    position: sticky;
-    top: 0;
+    padding: 0;
+    ${pinned(HEADER_HEIGHT_VAR)};
   }
 `;
diff --git a/src/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.tsx b/src/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.tsx
index 466630552..3b0203ec7 100644
--- a/src/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.tsx
+++ b/src/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.tsx
@@ -1,6 +1,5 @@
 import { JSX, ReactNode } from "react";
 import { SELECTOR } from "../../../../../../common/selectors";
-import { useLayoutDimensions } from "../../../../../../providers/layoutDimensions/hook";
 import { SidebarPositioner as Positioner } from "./sidebarPositioner.styles";
 
 /**
@@ -11,7 +10,7 @@ export interface SidebarPositionerProps {
 }
 
 /**
- * Positions the sidebar content; from the "md" breakpoint up, it is sticky and offset by the header height.
+ * Positions the sidebar content; from the "md" breakpoint up, it pins below the sticky header.
  * @param props - Component props.
  * @param props.children - Sidebar content.
  * @returns The sidebar positioner.
@@ -19,13 +18,5 @@ export interface SidebarPositionerProps {
 export const SidebarPositioner = ({
   children,
 }: SidebarPositionerProps): JSX.Element => {
-  const { dimensions } = useLayoutDimensions();
-  return (
-    <Positioner
-      headerHeight={dimensions.header.height}
-      id={SELECTOR.SIDEBAR_POSITIONER}
-    >
-      {children}
-    </Positioner>
-  );
+  return <Positioner id={SELECTOR.SIDEBAR_POSITIONER}>{children}</Positioner>;
 };
diff --git a/src/components/Layout/components/Sidebar/sidebar.styles.ts b/src/components/Layout/components/Sidebar/sidebar.styles.ts
index 8f785f357..ca276fd15 100644
--- a/src/components/Layout/components/Sidebar/sidebar.styles.ts
+++ b/src/components/Layout/components/Sidebar/sidebar.styles.ts
@@ -5,5 +5,6 @@ export const Sidebar = styled.div`
   align-self: stretch;
   border-right: 1px solid ${PALETTE.SMOKE_MAIN};
   box-sizing: content-box;
+  contain: size; /* sized by the row it stretches into, not by its filters */
   width: 264px;
 `;
diff --git a/src/components/Layout/hooks/UseLayoutHeight/hook.ts b/src/components/Layout/hooks/UseLayoutHeight/hook.ts
new file mode 100644
index 000000000..634d60f2d
--- /dev/null
+++ b/src/components/Layout/hooks/UseLayoutHeight/hook.ts
@@ -0,0 +1,26 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import type { CSSPropHyphen } from "../../../../hooks/useHtmlStyle/types";
+import type { UseLayoutHeight } from "./types";
+import { observeHeight } from "./utils";
+
+/**
+ * Measures an element's height and sets it on the HTML element as a CSS custom
+ * property, for styles that size or pin around it. The property is written
+ * from the resize observer, before paint and without re-rendering, and is
+ * removed on unmount so styles fall back to their default.
+ * @param property - Custom property to set, e.g. `--header-height`.
+ * @returns The ref to attach to the measured element, and whether it has been measured.
+ */
+export const useLayoutHeight = <T extends HTMLElement = HTMLElement>(
+  property: CSSPropHyphen,
+): UseLayoutHeight<T> => {
+  const ref = useRef<T>(null);
+  const [isMeasured, setIsMeasured] = useState(false);
+
+  useLayoutEffect(
+    () => observeHeight(ref.current, property, setIsMeasured),
+    [property],
+  );
+
+  return { isMeasured, ref };
+};
diff --git a/src/components/Layout/hooks/UseLayoutHeight/types.ts b/src/components/Layout/hooks/UseLayoutHeight/types.ts
new file mode 100644
index 000000000..99c6bb27b
--- /dev/null
+++ b/src/components/Layout/hooks/UseLayoutHeight/types.ts
@@ -0,0 +1,9 @@
+import type { RefObject } from "react";
+
+/**
+ * Return value of the useLayoutHeight hook.
+ */
+export interface UseLayoutHeight<T extends HTMLElement = HTMLElement> {
+  isMeasured: boolean;
+  ref: RefObject<T | null>;
+}
diff --git a/src/components/Layout/hooks/UseLayoutHeight/utils.ts b/src/components/Layout/hooks/UseLayoutHeight/utils.ts
new file mode 100644
index 000000000..111f0d25c
--- /dev/null
+++ b/src/components/Layout/hooks/UseLayoutHeight/utils.ts
@@ -0,0 +1,29 @@
+import type { CSSPropHyphen } from "../../../../hooks/useHtmlStyle/types";
+import { getBorderBoxSizeHeight } from "../../../../hooks/useResizeObserver";
+
+/**
+ * Observes an element's border-box height and writes it to a custom property on
+ * the HTML element on every resize.
+ * @param element - Element to measure; nothing is observed when null, or where ResizeObserver is unavailable.
+ * @param property - Custom property to set.
+ * @param onMeasure - Called with true once the element has been measured.
+ * @returns Cleanup that stops observing and removes the property.
+ */
+export function observeHeight(
+  element: HTMLElement | null,
+  property: CSSPropHyphen,
+  onMeasure: (isMeasured: boolean) => void,
+): (() => void) | undefined {
+  if (!element || typeof ResizeObserver === "undefined") return;
+  const root = document.documentElement;
+  const observer = new ResizeObserver((entries) => {
+    const { height = 0 } = getBorderBoxSizeHeight(entries);
+    root.style.setProperty(property, `${height}px`);
+    onMeasure(true);
+  });
+  observer.observe(element);
+  return (): void => {
+    observer.disconnect();
+    root.style.removeProperty(property);
+  };
+}
diff --git a/src/components/common/FigureLightbox/hooks/UseShowInContext/utils.ts b/src/components/common/FigureLightbox/hooks/UseShowInContext/utils.ts
index 2b3bc4ae9..8c8e0d5c2 100644
--- a/src/components/common/FigureLightbox/hooks/UseShowInContext/utils.ts
+++ b/src/components/common/FigureLightbox/hooks/UseShowInContext/utils.ts
@@ -2,18 +2,21 @@ import type { LightboxFigureItem } from "../../types";
 
 /**
  * Scrolls a figure into view and focuses its expand button. The figure is centred in the viewport, or aligned to its top if it is taller than the viewport, so its top isn't cut off.
- * Scrolling honours the figure's scroll-margin-top, which a site with a fixed header can set.
+ * Scrolling honours the page's scroll-padding-top (which clears the sticky header) and the figure's scroll-margin-top, so the figure counts as tall when it doesn't fit the space they leave.
  * @param figure - Figure to show.
  */
 export function showFigure(figure: LightboxFigureItem): void {
   const figureEl = figure.figureRef.current;
   if (!figureEl) return;
-  // Room above the figure that scrolling leaves clear, e.g. for a fixed header.
+  // Room above the figure that scrolling leaves clear: the page's scroll-padding-top (the sticky header) plus the figure's own scroll-margin-top.
+  const scrollPaddingTop =
+    parseFloat(getComputedStyle(document.documentElement).scrollPaddingTop) ||
+    0;
   const scrollMarginTop =
     parseFloat(getComputedStyle(figureEl).scrollMarginTop) || 0;
   const isTall =
     figureEl.getBoundingClientRect().height >
-    window.innerHeight - scrollMarginTop;
+    window.innerHeight - scrollPaddingTop - scrollMarginTop;
   figureEl.scrollIntoView({ block: isTall ? "start" : "center" });
   figureEl.querySelector("button")?.focus({ preventScroll: true });
 }
diff --git a/src/hooks/UseLayoutSpacing/hook.ts b/src/hooks/UseLayoutSpacing/hook.ts
deleted file mode 100644
index fac41ab51..000000000
--- a/src/hooks/UseLayoutSpacing/hook.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
-import { UseLayoutSpacing } from "./types";
-
-/**
- * Returns the space taken by the layout's header and footer, from the measured
- * layout dimensions.
- * @returns Spacing with the footer height at the bottom and the header height at the top.
- */
-export const useLayoutSpacing = (): UseLayoutSpacing => {
-  const { dimensions } = useLayoutDimensions();
-  return {
-    spacing: {
-      bottom: dimensions.footer.height,
-      top: dimensions.header.height,
-    },
-  };
-};
diff --git a/src/hooks/UseLayoutSpacing/types.ts b/src/hooks/UseLayoutSpacing/types.ts
deleted file mode 100644
index a5a4f1681..000000000
--- a/src/hooks/UseLayoutSpacing/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Space, in pixels, taken at the top and bottom of the layout.
- */
-export interface LayoutSpacing {
-  bottom: number;
-  top: number;
-}
-
-/**
- * Return value of the useLayoutSpacing hook.
- */
-export interface UseLayoutSpacing {
-  spacing: LayoutSpacing;
-}
diff --git a/src/hooks/useHtmlStyle/constants.ts b/src/hooks/useHtmlStyle/constants.ts
index a08c235b2..b2a442aee 100644
--- a/src/hooks/useHtmlStyle/constants.ts
+++ b/src/hooks/useHtmlStyle/constants.ts
@@ -1,5 +1,7 @@
-import { CSSPropHyphen } from "./types";
+import type { CSSPropHyphen } from "./types";
 
-export const PROPERTY: Record<string, CSSPropHyphen> = {
-  SCROLL_PADDING_TOP: "scroll-padding-top",
-};
+export const PROPERTY = {
+  DATA_DICTIONARY_FILTERS_HEIGHT: "--data-dictionary-filters-height",
+  FOOTER_HEIGHT: "--footer-height",
+  HEADER_HEIGHT: "--header-height",
+} as const satisfies Record<string, CSSPropHyphen>;
diff --git a/src/hooks/useHtmlStyle/types.ts b/src/hooks/useHtmlStyle/types.ts
index f5a7e729e..982412cc4 100644
--- a/src/hooks/useHtmlStyle/types.ts
+++ b/src/hooks/useHtmlStyle/types.ts
@@ -1,3 +1,6 @@
 import type * as CSS from "csstype";
 
-export type CSSPropHyphen = keyof CSS.PropertiesHyphen;
+/**
+ * Hyphenated CSS property name, or a custom property.
+ */
+export type CSSPropHyphen = keyof CSS.PropertiesHyphen | `--${string}`;
diff --git a/src/providers/layoutDimensions/constants.ts b/src/providers/layoutDimensions/constants.ts
deleted file mode 100644
index d328cc756..000000000
--- a/src/providers/layoutDimensions/constants.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { LayoutDimensions } from "./types";
-
-export const DEFAULT_LAYOUT_DIMENSIONS: LayoutDimensions = {
-  footer: { height: 0 },
-  header: { height: 0 },
-};
diff --git a/src/providers/layoutDimensions/context.tsx b/src/providers/layoutDimensions/context.tsx
deleted file mode 100644
index 0a52087eb..000000000
--- a/src/providers/layoutDimensions/context.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { createContext } from "react";
-import { DEFAULT_LAYOUT_DIMENSIONS } from "./constants";
-import { LayoutDimensionsContextProps } from "./types";
-
-export const LayoutDimensionsContext =
-  createContext<LayoutDimensionsContextProps>({
-    dimensions: DEFAULT_LAYOUT_DIMENSIONS,
-    footerRef: { current: null },
-    headerRef: { current: null },
-  });
diff --git a/src/providers/layoutDimensions/hook.ts b/src/providers/layoutDimensions/hook.ts
deleted file mode 100644
index fff63cfb5..000000000
--- a/src/providers/layoutDimensions/hook.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useContext } from "react";
-import { LayoutDimensionsContext } from "./context";
-import { LayoutDimensionsContextProps } from "./types";
-
-/**
- * Returns the layout dimensions context.
- * @returns The layout dimensions context.
- */
-export const useLayoutDimensions = (): LayoutDimensionsContextProps => {
-  return useContext<LayoutDimensionsContextProps>(LayoutDimensionsContext);
-};
diff --git a/src/providers/layoutDimensions/provider.tsx b/src/providers/layoutDimensions/provider.tsx
deleted file mode 100644
index b3a43f749..000000000
--- a/src/providers/layoutDimensions/provider.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { JSX, useRef } from "react";
-import {
-  getBorderBoxSizeHeight,
-  useResizeObserver,
-} from "../../hooks/useResizeObserver";
-import { LayoutDimensionsContext } from "./context";
-import { LayoutDimensions, LayoutDimensionsProviderProps } from "./types";
-
-/**
- * Provides the header and footer heights through LayoutDimensionsContext, measured with a resize observer on the header and footer refs.
- * @param props - Component props.
- * @param props.children - Children.
- * @returns The layout dimensions provider.
- */
-export const LayoutDimensionsProvider = ({
-  children,
-}: LayoutDimensionsProviderProps): JSX.Element => {
-  const footerRef = useRef<HTMLElement>(null);
-  const headerRef = useRef<HTMLElement>(null);
-  const footerRect = useResizeObserver(footerRef, getBorderBoxSizeHeight);
-  const headerRect = useResizeObserver(headerRef, getBorderBoxSizeHeight);
-
-  const dimensions: LayoutDimensions = {
-    footer: { height: footerRect?.height ?? 0 },
-    header: { height: headerRect?.height ?? 0 },
-  };
-
-  return (
-    <LayoutDimensionsContext.Provider
-      value={{ dimensions, footerRef, headerRef }}
-    >
-      {children}
-    </LayoutDimensionsContext.Provider>
-  );
-};
diff --git a/src/providers/layoutDimensions/types.ts b/src/providers/layoutDimensions/types.ts
deleted file mode 100644
index 974aa7d5e..000000000
--- a/src/providers/layoutDimensions/types.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ReactNode, RefObject } from "react";
-import { ElementRect } from "../../hooks/useResizeObserver";
-
-/**
- * Header and footer heights.
- */
-export interface LayoutDimensions {
-  footer: Pick<ElementRect, "height">;
-  header: Pick<ElementRect, "height">;
-}
-
-/**
- * Layout dimensions context.
- */
-export interface LayoutDimensionsContextProps {
-  dimensions: LayoutDimensions;
-  footerRef: RefObject<HTMLElement | null>;
-  headerRef: RefObject<HTMLElement | null>;
-}
-
-/**
- * Props for the LayoutDimensionsProvider component.
- */
-export interface LayoutDimensionsProviderProps {
-  children: ReactNode | ReactNode[];
-}
diff --git a/src/styles/common/mixins/breakpoints.ts b/src/styles/common/mixins/breakpoints.ts
index 6df05150c..f772f32a1 100644
--- a/src/styles/common/mixins/breakpoints.ts
+++ b/src/styles/common/mixins/breakpoints.ts
@@ -18,6 +18,15 @@ export const bpDown820 = ({ theme }: ThemeProps): string =>
 export const bpDown1024 = ({ theme }: ThemeProps): string =>
   theme.breakpoints.down(1024);
 
+/**
+ * Media query for viewports at or wider than 1024px.
+ * @param props - Theme props.
+ * @param props.theme - MUI theme.
+ * @returns The media query string.
+ */
+export const bpUp1024 = ({ theme }: ThemeProps): string =>
+  theme.breakpoints.up(1024);
+
 /**
  * Media query for viewports at or wider than 1366px.
  * @param props - Theme props.
diff --git a/src/styles/common/mixins/pinned.ts b/src/styles/common/mixins/pinned.ts
new file mode 100644
index 000000000..476266945
--- /dev/null
+++ b/src/styles/common/mixins/pinned.ts
@@ -0,0 +1,27 @@
+import type { SerializedStyles } from "@emotion/react";
+import { css } from "@emotion/react";
+
+/**
+ * For regions that pin inside the HTML scroll-padding-top (the header, the data
+ * dictionary title and filters): their focusable elements are always in view, so
+ * focusing one (e.g. a menu restoring focus to its trigger) must not scroll the
+ * page to clear the padding. Not for regions that scroll internally, where the
+ * margin would also stop them scrolling a focused element into view.
+ */
+export const pinnedFocus = css`
+  & :is(a, button, input, select, textarea, [tabindex]) {
+    scroll-margin-top: -100vh;
+  }
+`;
+
+/**
+ * Pins an element at the given offset from the top as the page scrolls.
+ * @param top - Top offset, e.g. the header height variable.
+ * @returns Pinned styles.
+ */
+export function pinned(top: string): SerializedStyles {
+  return css`
+    position: sticky;
+    top: ${top};
+  `;
+}
diff --git a/src/views/ResearchView/assistant/components/Drawer/drawer.styles.ts b/src/views/ResearchView/assistant/components/Drawer/drawer.styles.ts
index e2ff7ea2d..c93ea52f1 100644
--- a/src/views/ResearchView/assistant/components/Drawer/drawer.styles.ts
+++ b/src/views/ResearchView/assistant/components/Drawer/drawer.styles.ts
@@ -1,23 +1,20 @@
 import styled from "@emotion/styled";
 import { Drawer } from "@mui/material";
-import { ComponentProps } from "react";
-import { LayoutSpacing } from "../../../../../hooks/UseLayoutSpacing/types";
+import { HEADER_HEIGHT_VAR } from "../../../../../components/Layout/components/Header/common/constants";
 import { PALETTE } from "../../../../../styles/common/constants/palette";
 
-export const StyledDrawer = styled(Drawer, {
-  shouldForwardProp(prop) {
-    return prop !== "bottom" && prop !== "top";
-  },
-})<ComponentProps<typeof Drawer> & LayoutSpacing>`
+export const StyledDrawer = styled(Drawer)`
+  contain: size; /* fills the main row without growing it, so a long conversation scrolls inside */
   height: 100%;
-  max-height: 100dvh;
+  max-height: calc(
+    100dvh - ${HEADER_HEIGHT_VAR}
+  ); /* never taller than the window, even beside content that grows the row */
   width: 412px;
   z-index: 0;
 
   > .MuiPaper-root {
     background-color: ${PALETTE.COMMON_WHITE};
     border-right: 1px solid ${PALETTE.SMOKE_MAIN};
-    padding-top: ${({ top }) => top}px;
     position: relative;
     width: inherit;
   }
diff --git a/src/views/ResearchView/assistant/components/Drawer/drawer.tsx b/src/views/ResearchView/assistant/components/Drawer/drawer.tsx
index 25638d2ec..57b2d923b 100644
--- a/src/views/ResearchView/assistant/components/Drawer/drawer.tsx
+++ b/src/views/ResearchView/assistant/components/Drawer/drawer.tsx
@@ -1,5 +1,4 @@
 import { JSX } from "react";
-import { useLayoutSpacing } from "../../../../../hooks/UseLayoutSpacing/hook";
 import { DRAWER_PROPS } from "../../../../../styles/common/mui/drawer";
 import { TEST_IDS } from "../../../../../tests/testIds";
 import { StyledDrawer } from "./drawer.styles";
@@ -12,13 +11,11 @@ import { DrawerProps } from "./types";
  * @returns The drawer component.
  */
 export const Drawer = ({ children }: DrawerProps): JSX.Element => {
-  const { spacing } = useLayoutSpacing();
   return (
     <StyledDrawer
       data-testid={TEST_IDS.RESEARCH_PANEL}
       open
       variant={DRAWER_PROPS.VARIANT.PERSISTENT}
-      {...spacing}
     >
       {children}
     </StyledDrawer>
diff --git a/tests/emotionUnsafeSelector.test.tsx b/tests/emotionUnsafeSelector.test.tsx
index 90435572c..1fa93a6ec 100644
--- a/tests/emotionUnsafeSelector.test.tsx
+++ b/tests/emotionUnsafeSelector.test.tsx
@@ -5,12 +5,15 @@
 // jsdom doesn't resolve by default; the "development" export condition loads it.
 import styled from "@emotion/styled";
 import { jest } from "@jest/globals";
+import { ThemeProvider } from "@mui/material";
 import { render } from "@testing-library/react";
 import { ElementType } from "react";
 import { GridPaper } from "../src/components/common/Paper/paper.styles";
 import { StyledMarkdownRenderer as StyledDescription } from "../src/components/DataDictionary/components/Description/description.styles";
+import { Layout as FiltersLayout } from "../src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles";
 import { MarkdownRenderer } from "../src/components/MarkdownRenderer/markdownRenderer";
 import { StyledMarkdownRenderer as StyledMarkdownCell } from "../src/components/Table/components/TableCell/components/MarkdownCell/markdownCell.styles";
+import { createAppTheme } from "../src/theme/theme";
 import { StyledMarkdownRenderer as StyledAssistantMessage } from "../src/views/ResearchView/assistant/components/Messages/components/AssistantMessage/assistantMessage.styles";
 
 const UNSAFE_SELECTOR_WARNING = "potentially unsafe";
@@ -36,6 +39,7 @@ const WRAPPERS: [string, ElementType][] = [
   ["styled(MarkdownRenderer)", StyledMarkdownRenderer],
   ["AssistantMessage markdown", StyledAssistantMessage],
   ["DataDictionary description markdown", StyledDescription],
+  ["DataDictionary filters layout", FiltersLayout],
   ["MarkdownCell markdown", StyledMarkdownCell],
 ];
 
@@ -49,9 +53,11 @@ function countUnsafeSelectorWarnings(Component: ElementType): number {
     .spyOn(console, "error")
     .mockImplementation(() => undefined);
   render(
-    <Component value="Text">
-      <div />
-    </Component>,
+    <ThemeProvider theme={createAppTheme()}>
+      <Component value="Text">
+        <div />
+      </Component>
+    </ThemeProvider>,
   );
   const count = consoleErrorSpy.mock.calls.filter(([message]) =>
     String(message).includes(UNSAFE_SELECTOR_WARNING),
diff --git a/tests/figureLightbox.test.tsx b/tests/figureLightbox.test.tsx
index f90878884..25a55b4ad 100644
--- a/tests/figureLightbox.test.tsx
+++ b/tests/figureLightbox.test.tsx
@@ -568,6 +568,33 @@ describe("showFigure", () => {
     showFigure(figure);
     expect(scrollIntoView).toHaveBeenLastCalledWith({ block: "start" });
   });
+
+  it("treats a figure as tall when it doesn't fit below the page's scroll-padding-top", () => {
+    const root = document.documentElement;
+    root.style.setProperty("scroll-padding-top", "57px");
+    const figureEl = document.createElement("figure");
+    const scrollIntoView = jest.fn();
+    figureEl.scrollIntoView = scrollIntoView;
+    const figure = {
+      alt: "",
+      figureRef: { current: figureEl },
+      id: "a",
+      originalSrc: "",
+      src: "",
+    };
+    const setHeight = (height: number): void => {
+      figureEl.getBoundingClientRect = (): DOMRect => ({ height }) as DOMRect;
+    };
+    // Fits the window, but not the window less the sticky header.
+    setHeight(window.innerHeight - 40);
+    showFigure(figure);
+    expect(scrollIntoView).toHaveBeenLastCalledWith({ block: "start" });
+    // Fits below the header.
+    setHeight(window.innerHeight - 58);
+    showFigure(figure);
+    expect(scrollIntoView).toHaveBeenLastCalledWith({ block: "center" });
+    root.style.removeProperty("scroll-padding-top");
+  });
 });
 
 describe("FigureLightbox utils", () => {
diff --git a/tests/headerPosition.test.tsx b/tests/headerPosition.test.tsx
new file mode 100644
index 000000000..bfc8d3f77
--- /dev/null
+++ b/tests/headerPosition.test.tsx
@@ -0,0 +1,32 @@
+import { jest } from "@jest/globals";
+import { ThemeProvider } from "@mui/material";
+import { render, screen } from "@testing-library/react";
+
+jest.unstable_mockModule("next/navigation", () => ({
+  ...jest.requireActual<typeof import("next/navigation")>("next/navigation"),
+  usePathname: jest.fn(() => "/"),
+}));
+jest.unstable_mockModule("next/router", () => ({
+  ...jest.requireActual<typeof import("next/router")>("next/router"),
+  default: { push: jest.fn() },
+  useRouter: jest.fn(() => ({ asPath: "/", push: jest.fn() })),
+}));
+
+const { Header } =
+  await import("../src/components/Layout/components/Header/header");
+const { createAppTheme } = await import("../src/theme/theme");
+
+describe("Header", () => {
+  // The header is in flow, so content follows it at its real height; a fixed
+  // header would need every page to be offset by a measured height again.
+  it("should render the app bar sticky, not fixed", () => {
+    render(
+      <ThemeProvider theme={createAppTheme()}>
+        <Header logo={null} />
+      </ThemeProvider>,
+    );
+    const header = screen.getByRole("banner");
+    expect(header.classList.contains("MuiAppBar-positionSticky")).toBe(true);
+    expect(header.classList.contains("MuiAppBar-positionFixed")).toBe(false);
+  });
+});
diff --git a/tests/useLayoutHeight.test.tsx b/tests/useLayoutHeight.test.tsx
new file mode 100644
index 000000000..2aee35d18
--- /dev/null
+++ b/tests/useLayoutHeight.test.tsx
@@ -0,0 +1,97 @@
+import { jest } from "@jest/globals";
+import { act, render, screen } from "@testing-library/react";
+import type { JSX } from "react";
+import { useLayoutHeight } from "../src/components/Layout/hooks/UseLayoutHeight/hook";
+import { PROPERTY } from "../src/hooks/useHtmlStyle/constants";
+
+const PROPERTY_NAME = PROPERTY.HEADER_HEIGHT;
+
+let resize: ((entries: ResizeObserverEntry[]) => void) | undefined;
+const originalResizeObserver = global.ResizeObserver;
+
+/**
+ * Returns the custom property's value on the HTML element.
+ * @returns Property value, or an empty string when unset.
+ */
+function getValue(): string {
+  return document.documentElement.style.getPropertyValue(PROPERTY_NAME);
+}
+
+/**
+ * Renders an element measured by useLayoutHeight.
+ * @returns Unmount function.
+ */
+function renderMeasured(): () => void {
+  /**
+   * Element whose height is written to the custom property.
+   * @returns The measured element.
+   */
+  const Measured = (): JSX.Element => {
+    const { isMeasured, ref } = useLayoutHeight<HTMLDivElement>(PROPERTY_NAME);
+    return <div data-measured={isMeasured} data-testid="measured" ref={ref} />;
+  };
+  return render(<Measured />).unmount;
+}
+
+/**
+ * Reports a new border box height to the observer.
+ * @param blockSize - Height in pixels.
+ */
+function reportHeight(blockSize: number): void {
+  act(() => {
+    resize?.([
+      { borderBoxSize: [{ blockSize, inlineSize: 0 }] },
+    ] as unknown as ResizeObserverEntry[]);
+  });
+}
+
+describe("useLayoutHeight", () => {
+  beforeEach(() => {
+    resize = undefined;
+    global.ResizeObserver = jest.fn(
+      (callback: (entries: ResizeObserverEntry[]) => void) => {
+        resize = callback;
+        return {
+          disconnect: jest.fn(),
+          observe: jest.fn(),
+          unobserve: jest.fn(),
+        };
+      },
+    ) as unknown as typeof ResizeObserver;
+  });
+
+  afterEach(() => {
+    global.ResizeObserver = originalResizeObserver;
+    document.documentElement.style.removeProperty(PROPERTY_NAME);
+  });
+
+  it("should leave the property unset until the element is measured", () => {
+    renderMeasured();
+    expect(getValue()).toBe("");
+  });
+
+  it("should set the measured height, and update it on resize", () => {
+    renderMeasured();
+    expect(screen.getByTestId("measured").dataset.measured).toBe("false");
+    reportHeight(57);
+    expect(getValue()).toBe("57px");
+    expect(screen.getByTestId("measured").dataset.measured).toBe("true");
+    reportHeight(105);
+    expect(getValue()).toBe("105px");
+  });
+
+  // A measured height of 0 (e.g. an empty footer) must not fall back to the
+  // CSS default, so it is written rather than treated as "not measured".
+  it("should set a measured height of 0", () => {
+    renderMeasured();
+    reportHeight(0);
+    expect(getValue()).toBe("0px");
+  });
+
+  it("should remove the property on unmount", () => {
+    const unmount = renderMeasured();
+    reportHeight(57);
+    unmount();
+    expect(getValue()).toBe("");
+  });
+});