Author avatar

Vivek Kumar

Fixed Headers and Footers

Vivek Kumar

  • Jul 26, 2019
  • 7 Min read
  • 1,018 Views
  • Jul 26, 2019
  • 7 Min read
  • 1,018 Views
Web Development
React

Introduction

The scope of CSS animation is boundless. It takes a trusted and proven approach and there is almost nothing that this component of animation cannot achieve. The CSS framework in React is a foremost choice for animation pros because the library components have something to offer at every level. It doesn’t matter whether we are talking about the ground-level animation or an intermediary-to-advance level skillset.

There are many important and proven parameters that we are going to discuss in this guide. Our focus is going to be on the building of a full-screen modal containing fixed headers and footers, yet also includes stable scrollable content. After the completion of this demonstration, it would be feasible for you to understand all the code that you are going to implicate in the simplest manner and the different ways in which it can be achieved. We are also going to pass through various examples on the route to have a better grasp of the subject. So, let us proceed with the main content right away.

What Does a Wireframe Modal with a Fixed Header and Footer Look Like?

Here, we are going to talk about a frame, with scrollable content, with the size (height and width) of a standard mobile screen. We are taking this example because such a creation is largely in demand, especially with the e-commerce sites where the potential customers quickly scroll down, click, add their desired choices, and proceed through an order window. As mobile devices usually have less space on the screen, it is the modal view that renders compatible filter forms and actions.

Just have a glance over the images down below for a better understanding:

Imgur

It is quite simple, yet very effective. The best thing is that it is compatible with almost any browser, including the older version of Internet Explorer (IE) or the most recent versions of Android or iOS Safari web browser.

Learning to Code

All the markup which is required is mentioned below. It has the container component of modal as well as three child elements meant for the content, header, and footer.

1
2
3
4
5
<div class = "modal" >
	<div class = "modal__header" > </div>
	<div class = "modal__content" > </div>
	<div class = "modal__footer" > </div>
</div>
html

When it comes to the style component then the following can be the ideal layout for the modal.

1
2
3
4
5
6
7
8
9
10
11
12
.modal {
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
}

.modal.open {
	display: block;
}
css

The setting up of the style container is done by keeping it fixed and making a full adjustment of the height and width, with respect to the screen proportions. For instance, the modal is not conspicuous by default. We can apply JS in order to toggle the CSS class with .open to ensure it's noticeable on the screen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.modal__header,
.modal__footer {
	height: 100px;
}

.modal__content,
.modal__footer {
	position: absolute;
	width: 100%;
}

.modal__content {
	bottom: 100px;
	top: 100px;
	overflow-y: auto;
}

.modal__footer {
	bottom: 0;
}
css

Additionally, there are styles that are in existence for the content, header, and footer. Here, in this demonstration, we have taken the header and footer with a fixed 100px height. We have basically done this so that the content in the modal comprises both top and bottom, offset at the time when positioned categorically. As one can see, there is no requirement for positioning an absolute header. One is simply required to adjust the styles within the footer in order to position it, absolutely, by the bottom.

With a few lines of CSS, a fully responsive modal can be created that has fixed a header and footer, along with a scrollable part for content.

Alternative Solution to Using Flexbox and CSS Grid

With the application of display: flex;, the style declaration over the modal open state can be achieved. It is going to remain simple, as CSS is now functioning on display: flex; and the flex-direction: column; to determine the fact that the child components related to the modal are required to be laid out within a column.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.modal2 {
	display: none;
	position: fixed;
	top: 0;
	width: 100%
	height: 100%;
	left: 0;
}

.modal2.open {
	display: flex;
	flex-direction: column;
}

.modal2__header,
.modal2__footer {
	height: 100px;
}

.modal2__content {
	height: 100%;
	overflow-y: auto;
}
css

I do hope that the above approach using Flexbox is going to be utilized well by all of you. After all, it is quite simple in comparison to the fixed position approach. In the next approach, we are going to apply the CSS grid and observe how it affects the results.

Here, the markup is going to remain the same and the CSS for the modal’s open state be changed. There is going to be an open class CSS display:grid; type style declaration. It is actually going to determine the content to be presented in the modal view with a new and formidable two-dimensional CSS layout structure.

Here, while adjusting the content within a single column, we are going to set the height with grid-template-row: 100px auto 100px;. It turns out to be set as 100px height, in respect to the first and the last child existing within the modal, along with the header as well as the footer. The content is will be programmed to cover the remaining vertical area by setting up auto for the height of the rows for the dummy template.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.modal3 {
	display: none;
	height: 100%;
	left: 0;
	top: 0;
	width: 100%
	position: fixed;
}

.modal3.open {
	display: grid;
	grid-template-rows: 100px auto 100px;
}

.modal3__content {
	overflow-y: auto;
}
css

Quite simple! Don’t you think?

Conclusion

This guide has highlighted the building of a fullscreen modal with fixed a header and footer, along with adjustable content. We not only discussed the standard CSS class .open approach, but also two additional approaches directed towards Flexbox and CSS Grid applications. The perk of having these additional approaches in your toolbox is that you can make things simple, as per your needs, without compromising with overall quality and results.

So, get with it and make yourself a more powerful as an animator in the times to come! After all, adapting to changes is one of the keys to stable success.

References

While writing this guide, the following resource has been referenced:

1