How to stretch footer to fit size of html page and manipulate icons?-CodePudding

I am trying to stretch my element classed 'footer' to stretch along the bottom of my page. It stretches to fit 95% of the bottom, by estimation. Also, how do I manipulate each icon to space evenly but to the bottom left of my html page. I've classed each icon as its own class

Ex: class='github'

HTML

<div class='footer'>
        <a href='https://github.com/'><img src='images/github-favicon.png' 
style="width:30px; height: 30px;" class='github'></a>
        <a href='https://www.linkedin.com/in/'><img src='images/linkedin-favicon.png' 
style="width: 30px; height: 30px;" class='LinkedIn'></a>
        <a href='https://www.instagram.com/'><img src='images/instagram-favicon.png' 
style="width:30px; height: 30px;" class='Instagram'></a>
        <a href='https://www.facebook.com/'><img src='images/facebook-favicon.png' 
style="width:30px; height: 30px;" class='facebook'></a>
   </div>

CSS

.footer {
clear: both;
background-color: green;
padding: 12px;
position: fixed;
bottom: 0px;
width: 98%;
display: flex;
}

CodePudding user response：

.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #263238;
    text-align: center;
    color: #f4f4f4;
}

.icons{
    padding-top: 1rem;
}

.icons a{
    text-decoration: none;
    font-size: 2rem;
    margin: 0.5rem;
    color: #f4f4f4;
}

.company-name{
    font-size: 1.6rem;
    margin-top: 0.5rem;
}

@media (max-width: 500px){
    html{
        font-size: 50%;
    }
}    

@media(min-width: 501px) and (max-width: 768px){
    html{
    font-size: 50%;
    }
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Footer</title>
    <script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./Footer.css">
</head>

<body>
    <footer >
        <div >
           <a href="#"><i ></i></a>
           <a href="#"><i ></i></a>
           <a href="#"><i ></i></a>
           <a href="#"><i ></i></a>
            <p >
                ABC &copy; 2022, ALL Rights Reserved
            </p>
        </div>
    </footer>
</body>

</html>

CodePudding user response：

You need to remove the default style. is better to move away from float. start using flex and grid layout system

* {  
    margin: 0;
    padding: 0;
 }

 .header{
    height: 90vh;
    width: 100%;
    background: lightcoral;
 }

 .footer{ 
   height: 10vh;
   width: 100%;
   background: green;
   /*now for footer children*/
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
   grid-gap: 5px;
  }

  .footer img{
    width: 50%;
    height: auto;

  }

  .footer img:first-child{
    margin-left: 10px;
  }

 <div >
        <!-- parts before footer -->
    </div>
    <div class='footer'>
            <a href='https://github.com/'><img src='images/github-favicon.png' class='github'></a>
            <a href='https://www.linkedin.com/in/'><img src='images/linkedin-favicon.png' class='LinkedIn'></a>
            <a href='https://www.instagram.com/'><img src='images/instagram-favicon.png'  class='Instagram'></a>
            <a href='https://www.facebook.com/'><img src='images/facebook-favicon.png'    class='facebook'></a>
       </div>