Kepping the footer at the bottom of my page always for all screen size (mobile and desktop)

Question

I have built a website using html and css. The problem is the footer of my site is always staying above the bottom of the page. Link to the html and css files can be found here

<!DOCTYPE html>
<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">
    <meta name="description" content="">
    <meta name="author" content="text">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <title>SAMPLE PAGE</title>
    <!-- Theme CSS -->
    <link href="css/base_styles.css" rel="stylesheet">




    <!-- Custom Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
</head>

<body>

    <div id="mainPart">

        <!-- Header part to be added later -->
          <header>
            <div class="head-content">
                <img src="images/logo.png"  align="left">
                <h1 style="color:#fff;" ><strong>ABC COMPANY LIMITED</strong></h1>

            </div>
        </header>
        <!--header -->
         <!-- Navigation -->
        <nav class="x-nav">
            <ul class="nav-custom">
                <li class="nav-item nav-active"><a href="../index.php">Home</a></li>    

            </ul>
        </nav>
         Main content of the page goes here





        <!-- Footer -->
        <footer>
            <div class="footrow" >
                <div class="foot">
                    <div class="quarter-width">
                        <p style="color:#fff;">Address</p>
                        <hr>
                        <div>
                            ABC Company
                            <hr> Phone: 
                            <hr> Email: <a href="mailto:registrar@abc.com">abc@gmail.com</a>
                        </div>
                    </div>
                    <div class="quarter-width">
                        <p style="color:#fff;">Quick Links</p>
                        <hr>
                        <a href="../../admmission">Admission Test</a><br>
                        <a href="../../career/">Career</a><br>
                        <a href="contact.php">Contact Us</a><br>
                    </div>
                    <div class="quarter-width">
                        <p style="color:#fff;">Follow Us</p>
                        <hr>
                        <div id="social2">
                            <div class="sc-icn2">
                                <a href="" target="_blank"><img src="images/social/facebook.png" width="50px" height="50px" alt="facebook" title=" Mysuru"></a>
                            </div>
                            <div class="sc-icn2">
                                <a href="" target="_blank"><img src="images/social/twitter.png" width="50px" height="50px" alt="twitter" title="@oard"></a>
                            </div>
                            <div class="sc-icn2">
                                <a href="" target="_blank"><img src="images/social/instagram2.png" width="50px" height="50px" alt="instagram" title=" Photography"></a>
                            </div>
                        </div>
                    </div>
                    <div class="quarter-width">
                        <p style="color:#fff;">Resources</p>
                        <hr>
                        <a href="../../Library/">Library</a><br>
                        <a href="../../hall/">Residence Hall</a><br>
                        <a href=" ">Old Website</a><br>
                    </div>
                </div>
            </div>
            <div class="footrow2"   >
                <div class="foot">
                    <div class="half-width">
                        <p class="foot-p">&copy; - 2018 | All rights reserved</p>
                    </div>
                    <div class="half-width">
                        <p style="float:right !important;" class="foot-p">Developed &amp; Maintained By : </p>
                    </div>
                </div>
            </div>
        </footer>

        <!--Footer  -->

    </div>
</body>

Do, I need to make any change in the CSS file to make the footer stay at the bottom always no matter it is on mobile or desktop?

Fixed the footer "position:fixed; and bottom: 0px;" try this — Cryptex Technologies, Aug 06 '18 at 13:47
I don't want to see the footer always on my site. I want to see it by scrolling down @Cryptex Technologies — user10184297, Aug 06 '18 at 14:03

score 0 · Answer 1 · answered Aug 06 '18 at 13:49

0

There are many way to keep footer at bottom: 1- use a div for your content like <div class="content">Main content of the page goes here</div> and use this css

.content{
min-height:calc(100vh - /*menu (and everything above the content) height*/ )
}

2- set position:fixed;bottom:0;z-index:-1 for footer and set background for .content

answered Aug 06 '18 at 13:49

after setting position:fixed, footer is not visible fully @Morteza Senfi – user10184297 Aug 06 '18 at 14:05

score 0 · Answer 2 · answered Aug 06 '18 at 13:54

Please Try This Structure and css Code

<html lang="en"><head>

  <meta charset="UTF-8">
  <title>Test</title>




      <style>
    html, body {
        height: 100%;
        margin: 0;
    }
    .content {
        padding: 20px;
        min-height: 100%;
        margin: 0 auto -50px;
    }
    .footer,
    .push {
        height: 50px;
    }
    * {
        box-sizing: border-box;
    }
    body {
        font: 16px Sans-Serif;
    }
    h1 {
        margin: 0 0 20px 0;
    }
    p {
        margin: 20px 0 0 0;
    }
    footer {
        background: #42A5F5;
        color: white;
        line-height: 50px;
        padding: 0 20px;
    }
    </style>
</head>

<body>

  <div class="content">
  <h1>Sticky Footer with Negative Margin 1</h1>
  <p><button id="add">Add Content</button></p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><div class="push"></div>
</div>

<footer class="footer">
  Footer 
</footer>


 </body></html>

not working. footer is not at the bottom @iPraxa LLC – user10184297 Aug 06 '18 at 14:00 — user10184297, Aug 06 '18 at 14:00

Kepping the footer at the bottom of my page always for all screen size (mobile and desktop)

2 Answers2