Tips for positioning the footer in HTML and CSS

footer {
    background-color: #000000
}

.footer-nav {
    list-style: none;
    
}

.footer-nav li {
    display: inline-block;
    margin: 15px;
    font-weight: 400;
    font-size: 80%
    
}

.social {
    list-style: none;
}

.social li {
    display: inline-block;
    margin: 15px;
    float: right;
    font-size: 150%
}

.footer-nav li a,
.social li a {
    text-decoration: none;
}

.footer-nav li a:link,
.footer-nav li a:visited {
    color: #4b4b4b;
}

.footer-nav li a:hover,
.footer-nav li a:active {
    color: #9d9c9c;
}


.social li:first-child {
    margin-right: 0;
}

.social li a,
.social li a {
    text-decoration: none;
}

.social li a:link,
.social li a:visited {
    color: #4b4b4b;
}

.ion-logo-youtube:hover,
.ion-logo-youtube:active {
    color: #FF0000;
}

.ion-logo-facebook:hover,
.ion-logo-facebook:active {
    color: #3B5998;
}
.ion-logo-instagram:hover,
.ion-logo-instagram:active {
    color: #fb3958;
}
.ion-logo-github:hover,
.ion-logo-github:active {
    color: #8d8d8d;
}


.copy {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-bottom: 10px;
    font-size: 80%;
   


footer {
    background-color: #000000
}

.footer-nav {
    list-style: none;
    
}

.footer-nav li {
    display: inline-block;
    margin: 15px;
    font-weight: 400;
    font-size: 80%
    
}

.social {
    list-style: none;
}

.social li {
    display: inline-block;
    margin: 15px;
    float: right;
    font-size: 150%
}

.footer-nav li a,
.social li a {
    text-decoration: none;
}

.footer-nav li a:link,
.footer-nav li a:visited {
    color: #4b4b4b;
}

.footer-nav li a:hover,
.footer-nav li a:active {
    color: #9d9c9c;
}


.social li:first-child {
    margin-right: 0;
}

.social li a,
.social li a {
    text-decoration: none;
}

.social li a:link,
.social li a:visited {
    color: #4b4b4b;
}

.ion-logo-youtube:hover,
.ion-logo-youtube:active {
    color: #FF0000;
}

.ion-logo-facebook:hover,
.ion-logo-facebook:active {
    color: #3B5998;
}
.ion-logo-instagram:hover,
.ion-logo-instagram:active {
    color: #fb3958;
}
.ion-logo-github:hover,
.ion-logo-github:active {
    color: #8d8d8d;
}


.copy {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-bottom: 10px;
    font-size: 80%;
   

 <footer>
    <div class="row">
      <div class="col span-1-of-2">
        <ul class="footer-nav">
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Our blog</a></li>
          <li><a href="#">Reach us</a></li>
        </ul>
      </div>
      <div class="col span-1-of-2">
        <ul class="social">
          <li><a href="#"><i class="icon ion-logo-youtube"></i></a></li>
          <li><a href="https://mbasic.facebook.com/pawankumar.gupta.712" target="_blank"><i class="icon ion-logo-facebook"></i></a></li>
          <li><a href="#"><i class="icon ion-logo-instagram"></i></a></li>
          <li><a href="#"><i class="icon ion-logo-github"></i></a></li>
        </ul>
      </div>
    </div>

    <div class="row copy">
      <p class="love">
        Made with &nbsp; <i class="icon ion-md-heart"></i>
      </p>
      <h2>
        Copyright &copy; 2018. All right reserved.
      </h2>
    </div>
  </footer>

problem

why i am not getting footer to the lowest side of the page... it gives background color at bottom.... how can i fix that issue in my code. i managed to do some possible solutions but i failed so i am asking here to great minds.i am very new to html css so ill be thankfull for every answer. thanks in advance..... ;)

javascripthtmlcssstylesfooter

Answer №1

Hello Vivek, welcome to stack overflow! If you're facing an issue with the white space between the footer and the bottom of your page, you can resolve it by implementing a CSS Reset code.

Most web browsers apply default margins, padding, etc to certain HTML elements. To eliminate these default styles, you can include a CSS Reset Code like the one below in your style.css file:

* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Answer №2

To easily implement this style in your project, just insert this CSS snippet:

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it illegal to escape quotes when using an image source attribute and onerror event in HTML: `<img src="x" onerror="alert("hello")" />`?

Experimenting with escape characters has been a fascinating experience for me. <img src="x" onerror=alert('hello'); /> <img src="x" onerror="alert(\"hello\")" /> The second code snippet triggers an illegal character error ...

javascripthtml

Unable to alter the protocol option of the request object in SailsJS

Currently, I am utilizing a library that relies on the req.secure option to proceed without any errors. However, my application is deployed on Heroku and I have implemented custom middleware to check the "x-forwarded-proto" header and set req.secure as tru ...

javascriptnode.jsherokuexpresssails.js

What is the best way to center a Div element without it scrolling?

Can someone assist me in resolving this problem? I am struggling to design a webpage with two images inside a div, centered on the screen. Currently, it is centered but I do not want it to be scrollable. My goal is to display the full image without needing ...

htmlcss

My div is becoming overly wide due to padding and margin issues

Looking at this div: <!------ CODE SNIPPET ------> <div id="content"> <div class="top"> I am cool<br /> I am cool<br /> I am cool<br /> I am cool<br /> </div> </div> <!------ /CODE SNIPP ...

htmlcsswindowpaddingmargin

Retrieve JSON data from PHP using D3.request

Looking to extract data from an SQL database using PHP and then convert it into JSON format with the "echo json_encode($array);" function. I have a requirement to create a graph using D3.js, which means I need to transfer this JSON data from PHP. Can anyo ...

javascriptphpjsonajaxd3.js

Struggling to constrain a TextField component from material-ui and encountering an issue with the inputRef

Currently, I am attempting to restrict the length of an autocomplete textfield within my project. However, when I apply InputProps={{ maxLength: 2 }}, it throws an error stating that my inputRef.current is null. Even though I have set the ref in the inputR ...

javascriptreactjsmaterial-ui

The result of the $.post() request is back

In my current code, I am using a jQuery $.post function like this: $.post('/test', json_data, function(data) { result = data }); This function is being used in a validation process where the return value (data) contains either true or false ...

javascriptjqueryajaxpostreturn-value

How to Stop Fixed Elements in iOS from Zooming

I'm currently working on a responsive website with a fixed header and navigation. Is there a way to allow users to zoom in on the page's content without affecting the fixed elements? Thanks for any help! ...

cssioszoomingresponsive-designcss-position

The EJS is throwing an error because it cannot define the property "round" on an undefined object

I'm currently delving into the realm of Node.js, using the "Secrets of Ninja" book as my guide. I've come across an EJS program in the book that I copied verbatim to run, but I encountered an error despite not making any modifications to the code ...

javascriptnode.jsejs

Tips for locating direct children of a non-root element using CSS selectors in Selenium

When working with a <table> element, I encountered the need to search for its descendants and direct descendants while avoiding wading through nested tables. The elements I seek lack reasonable IDs, so specific selectors are essential: <html> ...

c#cssselenium

AngularJS tips for resolving an issue when trying to add duplicates of a string to an array

Currently dealing with a bug that occurs when attempting to push the same string into an array that has already been added. The app becomes stuck and prevents the addition of another string. How can I prevent the repeat from causing the app to get stuck w ...

javascripthtmlangularjsarrays

In just a single line of code, you can iterate through a Record object and retrieve an array of DOM elements

I am working with an object type MyType = 'name' | 'base' | 'six'; obj: MyType = { 'name': {key: 'm1'}, 'base': {key: 'm2'}, 'six': {key: 'm3'}, } My goal is ...

javascripttypescript

Dynamically obtaining the screen width in JSP using a variable

Could someone provide assistance on how to resize an image using an img src="blah.jpg?width=x" so that my page can be displayed at various sizes? I just need x (width) as a JSP variable. Update 2021: It's been 9 years since this question wa ...

javascriptcssjsp

Attempting to merge the data from two separate API responses into a single array of objects

I have a current project in which I'm dealing with an object that has three separate arrays of objects. Here's a glimpse of the structure... [ Array 1:[ { key: value} ], Array 2:[ { key: value}, { key: value} ], Array ...

javascriptangularjsarrays

Saga Redux fails to pass parameters during post requests

This is my first time using redux Saga to handle API requests. I have created an async function for a simple post request in the following way: const onLoginRequest = async (userName, password) => await fetch(`${loginApi}`, { method: 'POST', ...

javascriptreactjsreduxredux-saga

Issue with the status of a vue data object within a component

While working on updating my original Vue project, I encountered an error with the data object sports_feeds_boxscores_*. The website features three tabs that display scores for the major sports leagues. I am currently in the process of adding player stats ...

javascriptvue.jsvue-component

Tips for dynamically updating values when input numbers are modified using JavaScript

Check out this amazing tip calculator on netlify. I successfully built it using html, scss, and javascript without relying on any tutorials. Despite taking longer than expected due to being a beginner, I am proud of the outcome. Now, I need some assistanc ...

javascriptfunctioninputaddeventlisteneronchange

Can JQuery be used to identify the CSS styles applied to selected elements?

Highlight the text by selecting it and clicking a button. If the text is already highlighted, clicking the button should make the selected text return to normal. Can this be achieved using jQuery and a single button? Is it possible to identify the CSS st ...

javascripthtmljquerycss

What is the best way to display two arrays next to each other in an Angular template?

bolded text I am struggling to display two arrays side by side in an angular template. I attempted to use ngFor inside a div and span but the result was not as expected. A=[1,2,3,4] B=[A,B,C,D] Current Outcome using ngFor with div and span : Using Div : ...

javascripthtmlcssarraysangular

Automatically adjust text size within div based on width dimensions

Dealing with a specific issue here. I have a div that has a fixed width and height (227px x 27px). Inside this div, there is content such as First and Last name, which can vary in length. Sometimes the name is short, leaving empty space in the div, but som ...

javascriptjqueryhtmlcssresponsive-design