search
HomeWeb Front-endHTML TutorialHow to use CSS to implement layouts for fixed headers and footers and scrollable content areas in mobile pages?

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!

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
The Versatility of HTML: Applications and Use CasesThe Versatility of HTML: Applications and Use CasesApr 30, 2025 am 12:03 AM

HTML is not only the skeleton of web pages, but is more widely used in many fields: 1. In web page development, HTML defines the page structure and combines CSS and JavaScript to achieve rich interfaces. 2. In mobile application development, HTML5 supports offline storage and geolocation functions. 3. In emails and newsletters, HTML improves the format and multimedia effects of emails. 4. In game development, HTML5's Canvas API is used to create 2D and 3D games.

What is the root tag in an HTML document?What is the root tag in an HTML document?Apr 29, 2025 am 12:10 AM

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

Are the HTML tags and elements the same thing?Are the HTML tags and elements the same thing?Apr 28, 2025 pm 05:44 PM

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

What is the significance of <head> and <body> tag in HTML?What is the significance of <head> and <body> tag in HTML?Apr 28, 2025 pm 05:43 PM

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

What is the difference between <strong>, <b> tags and <em>, <i> tags?What is the difference between <strong>, <b> tags and <em>, <i> tags?Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Please explain how to indicate the character set being used by a document in HTML?Please explain how to indicate the character set being used by a document in HTML?Apr 28, 2025 pm 05:41 PM

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

What are the various formatting tags in HTML?What are the various formatting tags in HTML?Apr 28, 2025 pm 05:39 PM

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?Apr 28, 2025 pm 05:39 PM

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.