How to create a sticky header or footer with HTML5?
Use position: sticky and top: 0 to create a sticky head fixed at the top as the page scrolls; 2. For the sticky bottom bar, use position: sticky with bottom: 0 to make it absorb to the bottom when scrolling to the viewport; 3. If the bottom bar that is always visible, use position: fixed and set bottom: 0 and width: 100%, while adding margin to the content to avoid occlusion; 4. Make sure to set z-index to prevent hierarchical overlay issues, and note that position: sticky is good compatibility in modern browsers, but it is not supported in older browsers such as IE, and the final implementation mainly relies on CSS, while the semantic tags of HTML5 improve code readability and accessibility.
Creating a sticky header or footer with HTML5 and CSS is straightforward. While HTML5 provides the structure, it's CSS that makes the header or footer "stick" to the top or bottom of the viewport when scrolling. Here's how you can do it.
Use position: sticky for a sticky header
The easiest way to create a sticky header is by using position: sticky in CSS. This value allows an element to behave like position: relative until it reaches a certain scroll position, at which point it becomes position: fixed .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Sticky Header Example</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
position: sticky;
top: 0;
z-index: 100;
}
main {
height: 2000px; /* Just to enable scrolling */
padding: 2rem;
background-color: #f4f4f4;
}
</style>
</head>
<body>
<header>
<h1>Sticky Header</h1>
</header>
<main>
<p>Scroll down to see the header stick to the top.</p>
</main>
</body>
</html>Key points:
-
position: sticky;is applied to the header. -
top: 0;tells the browser to stick the element to the top of the viewport when reached. -
z-index: 100;ensures the header stays above other content.
Create a sticky footer using CSS (not sticky )
A sticky footer that stays at the bottom of the viewport (but only when content is short) or appears after content (when long) is usually handled with Flexbox or Grid. However, if you want a footer that's always visible at the bottom while scrolling (like a fixed app bar), use position: sticky or position: fixed .
Option 1: Always-visible sticky footer with position: sticky
footer {
background-color: #222;
color: white;
text-align: center;
padding: 1rem;
position: sticky;
bottom: 0;
}<footer> <p>Sticky Footer</p> </footer>
This keeps the footer at the bottom of the viewport once you scroll past it.
Option 2: Fixed-position footer (always visible)
If you want the footer to always be visible, even on short pages:
footer {
background-color: #222;
color: white;
text-align: center;
padding: 1rem;
position: fixed;
bottom: 0;
width: 100%;
z-index: 100;
}And make sure your main content has margin to avoid being hidden:
main {
margin-bottom: 60px; /* Height of the footer */
}Tips and considerations
- Browser support :
position: stickyis widely supported in modern browsers, but not in very old ones (like IE). - z-index : Always set a
z-indexif other elements might overlap your sticky header/footer. - Performance : Sticky positioning is performant and preferred over JavaScript solutions.
- Mobile : Test on mobile devices—sometimes overscroll or bounce effects can make sticky behavior look odd.
Summary
- Use
position: stickyandtop: 0for a sticky header. - Use
position: stickyandbottom: 0for a footer that sticks when scrolled into view. - Use
position: fixedif you want the footer always visible, like a mobile app bar. - Combine with proper spacing so content doesn't hide underneath.
Basically, it's more about CSS than HTML5, but semantic HTML5 elements like <header></header> and <footer></footer> make your code cleaner and more accessible.
The above is the detailed content of How to create a sticky header or footer with HTML5?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undresser.AI Undress
AI-powered app for creating realistic nude photos
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Popular tool
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
20516
7
13630
4
![How to quickly create a virtual human explanation video with Synthesia_Synthesia virtual human video production guide [Quick]](https://img.php.cn/upload/article/202512/18/2025121818540589928.jpg)
How to quickly create a virtual human explanation video with Synthesia_Synthesia virtual human video production guide [Quick]
Dec 18, 2025 pm 06:54 PM
Synthesia can quickly generate high-quality virtual human explanation videos: 1. Select a virtual human and customize the voice intonation; 2. Paste the script to enable automatic lip synchronization; 3. Add dynamic backgrounds and graphic and text layers; 4. Generate multi-language versions in batches with one click; 5. Export MP4 or embed HTML5 code for publication.
What to do if the IE browser web page loads slowly? IE browser performance optimization
Jan 15, 2026 pm 02:21 PM
Optimization methods for slow loading of IE web pages include: 1. Disable non-essential add-ons; 2. Reset IE settings; 3. Adjust connection and advanced parameters; 4. Clean system temporary files and DNS cache; 5. Turn off hardware acceleration and set to standard document mode.
Quark Browser video cannot be played. Steps to troubleshoot Quark Browser playback problems.
Jan 22, 2026 am 09:30 AM
Solutions to abnormal video playback in Quark browser include: 1. Check network connection and access permissions; 2. Clear cache and website data; 3. Enable JavaScript and H5 playback support; 4. Switch to desktop version of UA; 5. Turn off hardware acceleration and reset media services.
3699 mini-games online play entrance, latest decompression mini-games updated daily
Jan 13, 2026 pm 02:12 PM
The entrance address for online play of 3699 mini games is https://www.3699.com. The platform is based on HTML5 technology and runs without plug-ins. It supports multi-terminal adaptation, CDN acceleration, preloading optimization, and decompressed games are updated daily, classified according to emotional dimensions, and taking into account both interaction friendliness and privacy and security protection.
What to do if Microsoft Edge video clarity is blurred Microsoft Edge image quality adjustment
Jan 04, 2026 am 10:24 AM
Edge video blur can be enabled by enabling VSR, using the enhancement button, configuring NVIDIARTX overclocking, turning off hardware acceleration or checking DRM restrictions. The corresponding solution needs to be selected based on the graphics card model, browser version and video encryption.
![What should you pay attention to when collecting Shenma search on the mobile terminal? Tips for adapting to the mobile terminal [Instructions]](https://img.php.cn/upload/article/202601/04/2026010411000886182.jpg)
What should you pay attention to when collecting Shenma search on the mobile terminal? Tips for adapting to the mobile terminal [Instructions]
Jan 04, 2026 am 11:00 AM
In order to improve the inclusion effect of Shenma Search mobile terminal, it is necessary to adopt independent adaptation (self-jumping), add mobile-agentMeta statement, submit corresponding Sitemap for PC and mobile pages, ensure that the basic quality of mobile pages meets the standards, and verify the effective status of adaptation.
Browser browser high-definition rendering version address browser browser organ network high-definition rendering version clearly presented
Dec 20, 2025 am 09:30 AM
The address of browser browser HD rendering version is https://www.browser-hd-render.com, which features 4K sharp rendering, HDR video playback, Brotli compression optimization, end-to-end encrypted synchronization and accessibility auxiliary functions.
![How to set full-screen mode in uc browser_Steps to set full-screen mode in uc browser [Compilation]](https://img.php.cn/upload/article/202601/14/2026011421270588661.jpg)
How to set full-screen mode in uc browser_Steps to set full-screen mode in uc browser [Compilation]
Jan 14, 2026 pm 09:27 PM
There are five ways to solve the problem that UC Browser cannot go full screen: 1. Turn on the full screen switch through the toolbox; 2. Add UC smart components in the settings; 3. Switch UA to the computer version and refresh the page; 4. Use the F11 key or double-click the video and other system-level operations; 5. Clear the web page and GPU cache and then restart.
