使用 flexbox 建立固定页脚

Prior to initiating: Explore our guide to flexbox and append a footer to your website.

You have the ability to utilize flexbox to affix a footer to the bottom of each webpage on your site — irrespective of the quantity of content present above it.

The styles applied to the Body (All pages) tag flow down to every page within the site. To expediently arrange and align your design, configure the Body (All pages) tag to flex and have its flex children stack vertically within:

1. 选择 身体 element on the canvas or within the Navigator
2. 导航至 样式面板 > 选择器字段
3. 选择 正文（所有页面） 来自 选择器场地 落下
4. 继续 样式面板 > 布局 > 展示
5. 按 柔性
6. Tap on the vertical “向下箭头” icon to configure the flex direction to vertical

By setting the 身体 — the encompassing element of all content on the page — to Flex, adjusting the top margin on the footer to auto becomes possible. This action propels the footer away from the content above and ensures it sticks to the page’s bottom.

To establish the footer’s top margin:

1. 选择 页脚 on the canvas or within the Navigator
2. 前往 样式面板 > 间距
3. 分配 顶部 margin as 汽车

For pages lacking sufficient content to drive the footer entirely to the bottom, the top margin introduces white space to secure the footer at the bottom. Conversely, on content-heavy pages, the footer recognizes the other content on the page, preventing its top margin from generating extra white space above it.

Valuable tip: You can transform the footer into a component for reusability throughout your site, ensuring that any modifications applied to the footer impact all instances of the footer across your site. Delve into more details regarding components.