Home >Web Front-end >CSS Tutorial >How to Create a Fixed Header and Footer with Scrollable Content Using HTML and CSS?
How to Create a Fixed Header and Footer with Scrollable Content Using HTML and CSS?
- Linda HamiltonOriginal
- 2024-12-02 12:16:111018browse
Fixed Header and Footer with Scrollable Content
Implementing a fixed header and footer with scrollable content can be achieved with the following minimum HTML and CSS code.
<html> <body>
body {
height: 100%;
width: 100%;
}
#header {
position: absolute;
top: 0px;
left: 0px;
height: 200px;
right: 0px;
overflow: hidden;
}
#content {
position: absolute;
top: 200px;
bottom: 200px;
left: 0px;
right: 0px;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0px;
height: 200px;
left: 0px;
right: 0px;
overflow: hidden;
}
This HTML and CSS code creates a fixed header and footer with a scrollable content area in the middle. The header and footer have a fixed height, while the content area can be scrolled vertically.
The above is the detailed content of How to Create a Fixed Header and Footer with Scrollable Content Using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn