JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="header">
<!-- Header start -->
<h1>How to keep footers at the bottom of the page (CSS demo)</h1>
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<div id="left" style="float: left; width: 20%; height:100%; background:#71C347">
<div style="padding: 10px 10px 0px 10px;">
<font COLOR="#FFFFFF" size=5px > <h2> Introductions</h2>
</font>
</div>
</div> <div id="center" style="float: left; width: 28%; height:100%; background:#EFEFF0"><div style="padding: 30px 0px 0px 10px;"><table><tr><td><b><a class="link" href="#about" data-link="82" style="text-decoration:none;"><font size="5px"; color="#2B2E34"> 1</font></a></b></td></tr><tr><td><b><a class="link" href="#about" data-link="158" style="text-decoration:none;"><font size="5px"; color="#2B2E34">2</font></a></b></td></tr></table></div></div>
<div id="right" style="float: left; width: 52%; height:100%; background:#FFFFFF" >Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. CSS is a cornerstone specification of the web and almost all web pages use CSS style sheets to describe their presentation.
CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).
CSS can also allow the...
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
/* other non-essential CSS */
#header p,
#header h1 {
margin:0;
padding:10px 0 0 10px;
}
#footer p {
margin:0;
padding:10px;
}
</style>