---
description: Компонент закрепляет переданный контент сверху или снизу области видимости.
tags: navigation
---

<Overview group="layout">

# ~FixedLayout~ [tag:component]

> Компонент устарел начиная с `v8.0.0` и будет **удалён** в `v10.0.0`.
>
> Используйте вместо него [`Box`](/components/box) с `position="sticky"` и `insetBlockStart`/`insetBlockEnd`.
>
> ```tsx
> // Пример миграции с `<FixedLayout vertical="top" />`
> <Box position="sticky" insetBlockStart="0">
>   Я стики
> </Box>
> // Пример миграции с `<FixedLayout vertical="bottom" filled />`
> <Box position="sticky" insetBlockEnd="0" style={{ backgroundColor: 'var(--vkui--color_background_content)' }}>
>   Я стики
> </Box>
> ```
> Так как элемент с `position="sticky"` находится в основном потоке документа, при миграции с `<FixedLayout vertical="bottom" />`
> важно также соблюсти порядок элемента в документе.

Компонент закрепляет переданный контент сверху или снизу области видимости.
Учитывает высоту шапки и прочие системные отступы.

</Overview>

> Компонент использует `position: fixed` вместо `position: sticky` (ограничение минимально поддерживаемых версий браузеров).
> По этой причине `FixedLayout` находится вне основного потока. Учитывайте это при разработке интерфейсов.

import { FixedLayoutWrapper } from '@/components/wrappers';

{/* @example-description: Устаревший `FixedLayout` с закреплением поиска в верхней части области. */}
<Playground Wrapper={FixedLayoutWrapper}>
  ```jsx
  <FixedLayout vertical="top">
    <Search />
    <Separator />
  </FixedLayout>
  <Group mode="plain">
    {/** Компенсируем место, занятое поиском **/}
    <Spacing size={40} />
    <Box paddingInline={16} paddingBlock={12} maxBlockSize={170} overflow="auto" tabIndex={0}>
      <Paragraph>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sollicitudin lectus, a
        commodo sapien. Vivamus a urna leo. Integer iaculis dignissim urna, sit amet vestibulum diam
        bibendum a. Donec eu arcu ut augue porttitor faucibus. Vestibulum nec pretium tortor, sit
        amet congue nunc. Aenean ullamcorper ex sem, sed interdum quam consequat et. Vestibulum a ex
        non diam fringilla feugiat. Nunc eu tellus sed leo elementum cursus. Mauris blandit porta
        egestas. Curabitur eget justo elementum, malesuada lacus ut, congue mauris. Integer orci
        nisi, convallis vitae dapibus sit amet, molestie a risus. Aenean ultricies lacus eros, sit
        amet condimentum urna malesuada et. Sed quis dolor tempus orci fringilla volutpat in sed
        velit. Aenean aliquet bibendum pretium. Cras pulvinar lobortis purus. Donec placerat
        suscipit leo vitae sodales. Phasellus convallis lorem vitae arcu finibus pellentesque. In
        imperdiet vel leo a euismod. Nam sed odio a neque venenatis suscipit a placerat magna.
        Mauris magna nisl, consequat nec augue vitae, ultricies scelerisque ante. Phasellus pharetra
        risus eget imperdiet sodales. Integer dignissim auctor semper. Nulla odio odio, euismod ut
        interdum in, bibendum sed massa. Proin rutrum molestie massa in ultrices. Donec eu euismod
        turpis, eget lobortis lorem. Nulla facilisi. Nam lacinia posuere turpis, sed laoreet turpis
        auctor nec. Curabitur eu fermentum mauris. Phasellus malesuada consectetur mollis.
        Pellentesque pulvinar mauris turpis. Integer neque dolor, semper quis neque et, gravida
        commodo eros. Duis efficitur ex a turpis blandit tincidunt. Mauris sem mi, imperdiet quis
        ligula sit amet, fermentum vulputate felis. Phasellus eu ullamcorper dolor, porttitor
        pulvinar diam. Aliquam euismod, mauris nec varius lacinia, ligula libero vulputate leo, ut
        tristique massa nisi vitae tortor. Phasellus purus elit, gravida sit amet neque id, aliquam
        rutrum dui. Maecenas luctus sem vitae molestie porttitor. Cras viverra mauris risus, at
        sollicitudin ipsum interdum eu. Sed sit amet tempor enim.
      </Paragraph>
    </Box>
  </Group>
  ```
</Playground>

## Миграция на `Box`

{/* @example-description: Пример миграции с `FixedLayout` на `Box` с `position="sticky"`. */}
<Playground Wrapper={FixedLayoutWrapper}>
  ```jsx
  <Group mode="plain">
    <Box position="sticky" insetBlockStart={0}>
      <Search />
      <Separator />
    </Box>
    <Box paddingInline={16} paddingBlock={12} maxBlockSize={170} overflow="auto" tabIndex={0}>
      <Paragraph>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sollicitudin lectus, a
        commodo sapien. Vivamus a urna leo. Integer iaculis dignissim urna, sit amet vestibulum diam
        bibendum a. Donec eu arcu ut augue porttitor faucibus. Vestibulum nec pretium tortor, sit
        amet congue nunc. Aenean ullamcorper ex sem, sed interdum quam consequat et. Vestibulum a ex
        non diam fringilla feugiat. Nunc eu tellus sed leo elementum cursus. Mauris blandit porta
        egestas. Curabitur eget justo elementum, malesuada lacus ut, congue mauris. Integer orci
        nisi, convallis vitae dapibus sit amet, molestie a risus. Aenean ultricies lacus eros, sit
        amet condimentum urna malesuada et. Sed quis dolor tempus orci fringilla volutpat in sed
        velit. Aenean aliquet bibendum pretium. Cras pulvinar lobortis purus. Donec placerat
        suscipit leo vitae sodales. Phasellus convallis lorem vitae arcu finibus pellentesque. In
        imperdiet vel leo a euismod. Nam sed odio a neque venenatis suscipit a placerat magna.
        Mauris magna nisl, consequat nec augue vitae, ultricies scelerisque ante. Phasellus pharetra
        risus eget imperdiet sodales. Integer dignissim auctor semper. Nulla odio odio, euismod ut
        interdum in, bibendum sed massa. Proin rutrum molestie massa in ultrices. Donec eu euismod
        turpis, eget lobortis lorem. Nulla facilisi. Nam lacinia posuere turpis, sed laoreet turpis
        auctor nec. Curabitur eu fermentum mauris. Phasellus malesuada consectetur mollis.
        Pellentesque pulvinar mauris turpis. Integer neque dolor, semper quis neque et, gravida
        commodo eros. Duis efficitur ex a turpis blandit tincidunt. Mauris sem mi, imperdiet quis
        ligula sit amet, fermentum vulputate felis. Phasellus eu ullamcorper dolor, porttitor
        pulvinar diam. Aliquam euismod, mauris nec varius lacinia, ligula libero vulputate leo, ut
        tristique massa nisi vitae tortor. Phasellus purus elit, gravida sit amet neque id, aliquam
        rutrum dui. Maecenas luctus sem vitae molestie porttitor. Cras viverra mauris risus, at
        sollicitudin ipsum interdum eu. Sed sit amet tempor enim.
      </Paragraph>
    </Box>
  </Group>
  ```
</Playground>


## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `filled` | `boolean` | `-` | Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента. Это часто необходимо для фиксированных кнопок в нижней части экрана. |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `useParentWidth` | `boolean` | `-` | Всегда соответствовать ширине родителя. Ширина пересчитывается по событию `window` `resize`. |
| `vertical` | `"top" \| "bottom"` | `-` | Положение по вертикали, либо сверху, либо снизу. |