CSS container head is fixed, the result can be scrolled
CSS container header fixed, scrollable
In web design, it’s common to have a container with a fixed header at the top of the page and scrollable content. This layout is common on many websites and applications, such as news website article detail pages and blog article list pages. This article will explain how to achieve this layout effect using CSS.
1. Use position: fixed to fix the header
First, we can use the CSS position: fixed property to fix the container header at the top of the page. Here is a simple example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Header</title>
<style>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
.content {
margin-top: 50px; /* To prevent the content from being obscured by the header */
height: 2000px; /* To ensure sufficient height for scrolling */
}
</style>
</head>
<body>
<div class="header">Header - geek-docs.com</div>
<div class="content">Content - geek-docs.com</div>
</body>
</html>
Output:
In the above example, we use position: fixed to fix the header to the top of the page, and then set top: 0 and left: 0 to make the header close to the top left corner of the page. margin-top: 50px is set to prevent the content from being obscured by the header.
2. Use overflow: auto to achieve content scrolling
Next, we need to make the content scrollable. We can use the CSS overflow: auto property to achieve this effect. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrollable Content</title>
<style>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
.content {
margin-top: 50px;
height: 300px;
overflow: auto;
padding: 10px;
}
</style>
</head>
<body>
<div class="header">Header - geek-docs.com</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec Justo nec justo ultricies ultricies.</p>
</div>
</body>
</html>
Output:
In the above example, we set the overflow: auto property on the content. This way, when the content exceeds the height of the container, a scroll bar will appear, allowing the user to scroll to view the rest of the content.
3. Use max-height to achieve maximum content height
Sometimes, we don’t want the content to grow indefinitely, but to have a maximum height limit. At this time, we can use the CSS max-height property to achieve this. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Max Height Content</title>
<style>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
.content {
margin-top: 50px;
max-height: 300px;
overflow: auto;
padding: 10px;
}
</style>
</head>
<body>
<div class="header">Header - geek-docs.com</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec Justo nec justo ultricies ultricies.</p>
</div>
</body>
</html>
Output:
In the above example, we set max-height: 300px for the content portion. This means that the content portion will not exceed 300px in height, and a scrollbar will be displayed if it exceeds that height.
4. Using Flex Layout to Implement a Fixed Header and Scrollable Content
In addition to the methods described above, we can also use Flex Layout to achieve the effect of a fixed header and scrollable content. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Layout</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
.content {
flex: 1;
overflow: auto;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header - geek-docs.com</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies.</p>
</div>
</div>
</body>
</html>
Output:
In the above example, we use flex layout, setting display: flex and flex-direction: column to arrange the container’s child elements vertically. The height of the header is expanded by the content, while the content takes up the remaining space and can scroll.
5. Dynamically Calculate Height Using JavaScript
Sometimes, we want the content height to be dynamically calculated based on the actual page height. This can be achieved using JavaScript. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Height</title>
<style>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
.content {
margin-top: 50px;
overflow: auto;
padding: 10px;
}
</style>
</head>
<body>
<div class="header">Header - geek-docs.com</div>
<div class="content" id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies.</p>
</div>
<script>
window.onload = function() {
var content = document.getElementById('content');
var windowHeight = window.innerHeight;
var headerHeight = document.querySelector('.header').offsetHeight;
content.style.height = (windowHeight - headerHeight) + 'px';
};
</script>
</body>
</html>
Output:
In the above example, we use JavaScript to dynamically calculate the height of the content after the page loads, so that it takes up the remaining space. By obtaining the window height and the header height, we calculate the content height and set it accordingly.
6. Using the sticky Property to Achieve a Fixed Header
In addition to position: fixed, CSS also provides the position: sticky property to achieve a fixed header effect. position: sticky fixes an element on the page when it reaches a specific position. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Header</title>
<style>
.header {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
.content {
margin-top: 50px;
height: 2000px;
padding: 10px;
}
</style>
</head>
<body>
<div class="header">Header - geek-docs.com</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec Justo nec justo ultricies ultricies.</p>
</div>
</body>
</html>
Output:
In the example above, we use position: sticky to keep the header fixed to the page when it reaches the top. Note that position: sticky may not be supported in some older browsers; you need to add -webkit-sticky for compatibility.
7. Use JavaScript to Listen for Scroll Events
Sometimes, we want to change the style or behavior of the header when the user scrolls the page. In this case, we can use JavaScript to listen for scroll events. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Event</title>
<style>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
.content {
margin-top: 50px;
height: 2000px;
padding: 10px;
}
</style>
</head>
<body>
<div class="header" id="header">Header - geek-docs.com</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. ultricies ultricies. Integer nec justo nec justo ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies.</p>
</div>
<script>
window.onscroll = function() {
var header = document.getElementById('header');
if (window.scrollY > 50) {
header.style.backgroundColor = '#555';
} else {
header.style.backgroundColor = '#333';
}
};
</script>
</body>
</html>
Output:
In the above example, we use JavaScript to listen for the onscroll event and change the header’s background color when the user scrolls the page. When the page is scrolled more than 50px, the header’s background color turns gray; otherwise, it remains black.
8. Using CSS Animation Effects
In addition to changing the header’s style, we can also use CSS animation effects to enhance the user experience. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation</title>
<style>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
transition: background-color 0.3s;
}
.content {
margin-top: 50px;
height: 2000px;
padding: 10px;
}
</style>
</head>
<body>
<div class="header" id="header">Header - geek-docs.com</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non diam nec justo ultricies ultricies. Nullam nec justo nec nunc ultricies ultricies. Sed nec justo nec justo ultricies ultricies. Nullam nec justo nec justo ultricies ultricies. Integer nec justo nec justo ultricies ultricies.</p>
</div>
<script>
window.onscroll = function() {
var header = document.getElementById('header');
if (window.scrollY > 50) {
header.style.backgroundColor = '#555';
} else {
header.style.backgroundColor = '#333'; }
};
</script>
</body>
</html>
Output:
In the above example, we added a transition effect to the header. When the background color changes, there is a 0.3-second gradient effect, making the page transition smoother.
Conclusion
Through this article, we learned how to use CSS and JavaScript to achieve a fixed header and scrollable content. Whether it’s a fixed header, scrolling content, dynamically calculating the height, or adding animation effects, it can be achieved with simple code. These techniques can help us create more interactive and engaging pages and enhance the user experience.