Hello coders, A warm welcome to Code with Random. Today we’ll create a Sticky Footer using HTML & CSS. Footer is basically an element of the website which is positioned at the bottom of any website in which mostly you’ll see the icon of social media. In which you’ll click and redirect to social media page of the website owner individual or organization.To see a footer of the website you need to scroll down. So how to overcome with we’ll find out now. But before going to coding part we’ll see that what does Sticky Footer mean.
Sticky Footer At Bottom using HTML & CSS
What is Sticky Footer ?
It is basically an element which sticks at the bottom of the page and the user has to scroll less to view the footer. The content of the webpage or website is shorter than the viewport height of the browser.The purpose of a sticky footer is that it “sticks” to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.
Note that “sticky” here is exactly as described above. It’s not to be confused with position: fixed; which can be used to “stick” an element in place even if the page scrolls. Or, even more confusingly, it’s not position: sticky; either, which is liked fixed positioning inside of containers sort of.
Let us see the coding of Sticky Footer.
HTML Code For Sticky Footer:-
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.
All HTML documents must start with a document type declaration: <!DOCTYPE html>.The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.Inside the body tag we insert the main content of the website.Here we are using some basic concepts of HTML like paragraph tag <p> </p> .It is used to for inserting the paragraphs inside this.
Here we are also using different types of Semantic Tag.
Semantic elements = elements with a meaning.
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> – Clearly defines its content.
Here we are using <header>,<section>and <footer>.This also defines the their proper meaning In the header part we add Header or title, In section we add the main content of the website and in the footer we add the footer of the website.
<body>
<header>
<div class="title">Sticky Footer</div>
</header>
<section class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus nulla officia expedita tempore est modi consectetur perspiciatis sunt molestiae illum beatae tempora odio dignissimos aspernatur necessitatibus, ullam sapiente porro itaque autem et voluptates placeat temporibus quasi. Iste sequi earum molestias ut velit, animi quam ab necessitatibus, nulla voluptates soluta quae.</p>
<p>Quam pariatur iusto architecto eum dolore ex dolores, mollitia veniam consequatur recusandae commodi explicabo adipisci modi error nobis fuga, assumenda quibusdam beatae voluptates quae odio dolorem. Consectetur incidunt ipsum labore, eos aut voluptatem a molestias qui, omnis modi. Tenetur, laudantium maiores cum nobis totam recusandae? Consequatur exercitationem similique dolor voluptates.</p>
</section>
<footer> Stick Footer | Stick Footer | Stick Footer </footer>
</body>
</html>Css Code For Sticky Footer:-
Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
Here we are using the basic concepts of CSS like flexbox and border-box.We have given the height of the website to 100%.
html {
height: 100%;
}
body {
color: #111;
background-color: #FFF;
font-family: Arial, sans-serif;
font-size: 1.25rem;
line-height: 1.7;
margin: 0;
min-height: 100%;
display: flex;
flex-direction: column;
}
In this snippet we given height for whole page. And in body we have styled the color, bgcolor, font family, font size etc. To look the page like attractive.
title {
color: #C00;
font-size: 3.2rem;
font-weight: 700;
text-align: center;
text-transform: uppercase;
margin: 0.4em 0 0;
}
.container {
padding: 0.2em 4.5em;
}
footer {
color: #FFF;
background-color: #111;
text-align: center;
padding: 2.5em;
margin-top: auto;
}
In this snippet we have styled the title with font color font weight, text align & margin. Setting the footer text at the center and padding it to provide proper position. Let us look at the output.
Final Output Sticky Footer:–
Here is the Final output after applying the HTML and styling it with the help of CSS.
Happy Coding
ADVERTISEMENT
Ecommerce Website Using Html Css And Javascript Source Code
ADVERTISEMENT
Written by – @Harsh_9 & Himanshu Singh
ADVERTISEMENT
