How to Create a Fixed Header and Footer with Scrollable Content Using HTML and CSS?-CSS Tutorial-php.cn

How to Create a Fixed Header and Footer with Scrollable Content Using HTML and CSS?

Linda Hamilton

Release： 2024-12-02 12:16:11

Original

1045 people have browsed it

How to Create a Fixed Header and Footer with Scrollable Content Using HTML and CSS?

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.

1 2	`<html>` `<body>`

Copy after login

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;
}

Copy after login

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!