CSS half fixed, half scrollable layout
CSS Fixed Half, Scrollable Half Layout
In this article, we’ll show you how to use CSS to create a fixed-half, scrollable half layout. This layout is often used when you need to keep the page header fixed while allowing the content to scroll. For example, a webpage navigation bar is fixed at the top, while the content area scrolls with the scroll bar.
Read more: CSS Tutorial
Using the CSS position Property
To achieve this layout, we first need to use the CSS position property to fix the header to the top of the page. The position property has several possible values, the most commonly used of which are fixed and sticky.
Using the fixed value
Using the fixed value fixes the position of an element relative to the viewport, meaning it will always remain in the same position, regardless of scrolling.
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #f1f1f1;
}
In this example, we give the header element the class “.header,” set its position to fixed, its top to 0, its left to 0, its width to 100%, its height to 50px, and its background color to #f1f1f1.
Using the sticky value
Compared to fixed, using the sticky value causes an element to become fixed at a specific scroll position, while remaining static (i.e., normal flow layout) at other positions.
.header {
position: sticky;
top: 0;
width: 100%;
height: 50px;
background-color: #f1f1f1;
}
In this example, we give the header element the class “.header,” set its position to sticky, its top to 0, its width to 100%, its height to 50px, and its background color to #f1f1f1. When scrolling to the top of the page, the header will remain fixed at the top, and return to normal flow layout when scrolling down.
Using the CSS overflow Property
To achieve scrollable content, we need to use the CSS overflow property to control scrolling.
Using the overflow-y Value
The overflow-y property controls how an element handles vertical overflow. When set to auto or scroll, the element displays a vertical scroll bar to allow scrolling.
.content {
margin-top: 50px;
height: 1000px;
overflow-y: scroll;
}
In this example, we assign the content element the class “.content,” set margin-top to 50 pixels, height to 1000 pixels, and overflow-y to scroll. This will display a vertical scrollbar to facilitate scrolling when the content area exceeds 1000 pixels.
Using overflow-x Values
Similarly, the overflow-x property controls how an element handles horizontal overflow. When set to auto or scroll, the element displays a horizontal scrollbar to facilitate scrolling.
.content {
margin-top: 50px;
width: 800px;
white-space: nowrap;
overflow-x: auto;
}
In this example, we assign the content element the class “.content,” set its margin-top to 50 pixels, its width to 800 pixels, set its white-space to nowrap (preventing line wrapping), and set its overflow-x to auto. This will display a horizontal scrollbar to allow scrolling when the content area is wider than 800 pixels.
Sample App
Here’s an example of a CSS fixed-half, scrollable-half layout using the above techniques:
<html>
<head>
<style>
.header {
position: sticky;
top: 0;
width: 100%;
height: 50px;
background-color: #f1f1f1;
}
.content {
margin-top: 50px;
height: 1000px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="header">This is the header content</div>
<div class="content">This is the scrollable content</div>
</body>
</html>
In this example, we first define a header element with a class name of “.header” to position it fixed at the top. Then, we define a content element with a class name of “.content” to make it scrollable vertically.
Summary
By using the CSS position and overflow properties, we can easily create a layout with a fixed half and a scrollable half. This is very useful in some web designs, especially when it’s necessary to keep the header fixed while allowing the content to scroll. I hope this article helps you understand and implement this layout. Thank you!