How to use CSS to implement layouts for fixed headers and footers and scrollable content areas in mobile pages?

Mobile page: CSS layout solution for fixed head, bottom and scrollable content area

In mobile development, common requirements are: the head and bottom of the page are fixed, and the middle content area can be scrolled up and down. This article will introduce several CSS layout methods to achieve this effect. Suppose the HTML structure contains three parts: header ( .head ), content area ( .content ) and footer ( .foot ).

Solution

1. position: fixed; fixed positioning method

This method uses fixed positioning to fix the head and bottom, and the content area can be scrolled.

 html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* Make sure the head is above the content*/
  background-color: #f8f8f8;
  padding: 10px;
}

.content {
  flex: 1; /* occupy the remaining space*/
  overflow-y: auto;
  padding-top: 50px; /* Consider head height*/
  padding-bottom: 50px; /* Consider bottom height*/
}

.foot {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* Make sure the bottom is above the content*/
  background-color: #f8f8f8;
  padding: 10px;
}

.head and .foot use position: fixed; fixed, z-index ensures that it is above the content. .content uses flex: 1; to occupy the remaining space, overflow-y: auto; to achieve scrolling. padding-top and padding-bottom avoid content being obscured by the head and bottom.

2. Flexbox elastic box layout method

Flexbox can also easily implement this layout.

 html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.head {
  flex-shrink: 0; /* Prevent head shrinkage*/
  height: 50px; /* Fixed head height*/
  background-color: #f8f8f8;
  padding: 10px;
}

.content {
  flex: 1; /* occupy the remaining space*/
  overflow-y: auto;
  background-color: #ffffff;
}

.foot {
  flex-shrink: 0; /* Prevent bottom shrinkage*/
  height: 50px; /* Fixed bottom height*/
  background-color: #f8f8f8;
  padding: 10px;
}

Use flex-shrink: 0; to prevent it from shrinking, height property sets a fixed height. .content uses flex: 1; to occupy the remaining space and set scrolling.

3. Grid grid layout method

Grid layouts also apply.

 html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  grid-template-rows: 50px 1fr 50px; /* Define the head, content area, bottom height*/
}

.head {
  background-color: #f8f8f8;
  padding: 10px;
}

.content {
  overflow-y: auto;
  background-color: #ffffff;
}

.foot {
  background-color: #f8f8f8;
  padding: 10px;
}

grid-template-rows directly defines the row heights of the head, content area and bottom, and 1fr means that the content area occupies the remaining space. .content settings scroll.

All the above three methods can achieve the goal layout, and which method to choose depends on personal preferences and project needs. Remember to adjust the height and style of the head and bottom according to the actual situation.

The above is the detailed content of How to use CSS to implement layouts for fixed headers and footers and scrollable content areas in mobile pages?. For more information, please follow other related articles on the PHP Chinese website!