css fixed header footer


Have you ever wonder how websites can show you the same content on variable-width screens? You can see the same website on your mobile screen, it will look perfect and if you see the same on the laptop screen, it again looks perfect. So how is this possible? What is the thing behind the screen that is making text dynamic? Or we can say that the text on the websites is dynamic. But how does that happen? So this is done using CSS. There is a set of particular syntax which makes our content on the website responsive.

Now that you know you can make the text responsive using CSS codes, let us learn how to do that. Here is the syntax you follow to make the text responsive.

<b style="font-size: Nvw">your content</b>

Here ‘N’= number; vw= viewport

The first thing you get to do is select which text you want to resize or which content you want to make responsive. Like here I chose the body content. After that under the style, you will pass the viewport function with the size. Thus the text size can be set using vw or viewport. The viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 500cm wide, 1vw is 5cm.

Thus this is how you can resize the content as per your browsing screen.

Let us take an example to make it clear.

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:20vw;">Resizing Text</h1>
<h2 style="font-size:15vw;">Adding Heading 2 with different size</h2>
<p> style="font-size:10vw;">Resize the browser screen to see resizing.</p>
<p>here you are going to see how does the content change along with the screen of the browsing window </p>
</body>
</html>

see live example: https://jsfiddle.net/za64yvt8/1/

When you will run this code you can see the changes that are happening dynamically.

Header and Footer stuck at top and bottom

Here we make use of the sticky element. What happens here is the tag or the element is sticks to a position. When you scroll down your browser it does not get up or get down. This in a way can help us to make header and footer to stick at the top and bottom respectively. This is done using position property. The main task of the position property is to specify the type of positioning method used for the content it can be static, relative, fixed, absolute or sticky.

To make it stick at any position we use the following syntax:

position: fixed;

Any content with position: fixed; is positioned at a certain position in the viewport, which means it always stays at the same position even if the page is moved up and down. The top, right, bottom, and left properties are used to position the element.

 

Fixed header

In case you need to fix the header or you want any content to stick at the top you will be using the following syntax:

div.fixed {
  position: fixed;
  top: 0;
   width: 600px;
} 
div.fixed {
  position: sticky;
  top: 0;
  
}

 

The difference between using “fixed” and “sticky” is that “fixed” will fix the position of the content at a certain place in the window whereas “sticky” will stick to a place until offset condition is not met.

 

After it detects the offset condition on the viewport, it will move. Also “sticky” takes the entire bar whereas “fixed” can be used for customized content as well.

Fixed bottom

In case you need to fix the bottom or you want any content to stick at the bottom you will be using the following syntax:

div.fixed {
  position: fixed;
  bottom: 0;
   width: 600px;
} 
div.fixed {
  position: sticky;
  bottom: 0;
  
}

 

Let us take an example to make it clear:

Complete fixed header code:

<html> 
<head> 
<style> 
div.sticky { 
position: sticky; top: 0; background-color:#cccccc;} 
</style> 
</head> 
<body> <p>scroll to see how this works.</p> 
<div class="sticky">keep scrolling, I will stick up here only</div> 

<p>In this example, the sticky element sticks to the top of the page (that is it will be in the header) when you reach its scroll position.</p> <p>Scroll back up if you want me to go.</p> <p>Some text to enable scrolling... Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Estaba contento de ver a mi chica en un vínculo tan sólido, pero un nieto que realmente fue la guinda del pastel. Me contentaría con un ingreso modesto. Está bastante contento viviendo solo. Estoy contento de sentarme atrás. Se contentaron con ropa de segunda mano. </p> 
</body> 
</html>

jsfiddle: https://jsfiddle.net/ke2pbu4j/

 

Complete fixed footer code:

<html>
<head>
<style>
div.sticky {
  position: fixed;
  bottom: 0; 
  background-color:#cccccc;}
</style>
</head>
<body>
<p>scroll to see how this works.</p>
<div class="sticky">keep scrolling, I will stick up here only</div>
  <p>In this example, the  element is fixed to the bottom of the page (that is it will be in the footer).</p>
  <p>Some text to enable scrolling... Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. 
Estaba contento de ver a mi chica en un.. </p>
  </div>
</body>
</html>

jsfiddle: https://jsfiddle.net/qx7fzw9g/

 

+ There are no comments

Add yours