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!
Computer 404 error page
Solution to the Invalid Partition Table prompt when Windows 10 starts up
How to solve the problem of missing ssleay32.dll
How to set IP
How to open state file
Why is the mobile hard drive so slow to open?
What are the basic units of C language?
What platform is Kuai Tuan Tuan?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
