Tips for positioning the footer at the bottom of the page

During the process of constructing a new website, I included a footer that is neatly positioned at the bottom of my screen. https://i.sstatic.net/HgAbY.png

However, I noticed that on pages with minimal content, the footer does not remain fixed at the bottom: https://i.sstatic.net/mAAJB.png

In order to ensure that the footer is consistently displayed at the bottom of the screen, I made some adjustments to my CSS:

footer {
 position: absolute;
 bottom: 0;
 width: 100%;
}

Although this adjustment placed the footer at the bottom, it did not stretch the background as desired. https://i.sstatic.net/v6owb.png

Furthermore, when there is more content on a page, it ends up being displayed below the footer. https://i.sstatic.net/3Rqn1.png

It appears that my current CSS modifications are inadequate. Can anyone offer suggestions for addressing this issue correctly?

Following changes recommended by Mehadi Hassan have resolved most issues, with the addition of:

body {
  display: flex;
  flex-direction: column;
  height: 100vh; /* To avoid IE 10-11 `min-height` bug */
}

Despite these improvements, a small error persists on one of the pages, although all div elements appear to be functioning correctly.

https://i.sstatic.net/RLpwo.png

<?php require_once('includes/header.php'); ?>

    <!-- Page Background -->
    <div class="bg">

        <!-- Page Content -->
        <div class="container header">

          <!-- Page Heading/Breadcrumbs -->
          <h1 class="mt-4 mb-3">About Rotterdam Steel Works</h1>

          <!-- Intro Content -->
          <div class="row">
            <div class="col-lg-6">
              <iframe class="embed-responsive-item" src="img/media/RSW_web.mp4" allowfullscreen width="100%" height="100%"></iframe>
            </div>
            <div class="col-lg-6">
              <p>Rotterdam Steel Works is a steel cutting company equipped with two plasma and two oxyfuel cutting machines. We also offer Laser and Waterjet cutting services at competitive prices. Our reputation is built on fast delivery, good price-quality ratio, and efficient communication. Your orders are promptly passed to our AutoCAD technician for production planning, ensuring timely and high-quality results. For more information on our products and how Rotterdam Steel Works can be your reliable partner, please feel free to contact us.</p>
            </div>
          </div>
          <!-- /.row -->

          <!-- Team Members -->
          <h2 style="padding-top: 30px;">Contact Persons</h2>

          <div class="row">

            <div class="col-lg-3 mb-3">
              <div class="card h-100 text-center">
                <img class="card-img-top" src="img/gerard.png" alt="Gerard de Kaper">
                <div class="card-body">
                  <h4 class="card-title">Gerard de Kaper</h4>
                  <h6 class="card-subtitle mb-2 text-muted">Owner</h6>
                  <p class="card-text">Gerard has been working in the cutting industry since 1991. He started as a draughtsman and gained experience in production. His expertise lies in different types of steel and their specific properties.</p>
                </div>
                <div class="card-footer">
                  <div class="text-center"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ee9ebfceffceacefce1fafaebfceaefe3fdfaebebe2f9e1fce5fda0e0e2">[email protected]</a>"><button type="button" class="btn btn-primary"><i class="fas fa-envelope"></i> Send Email</button></a></div>
                </div>
              </div>
            </div>          

            <div class="col-lg-3 mb-3">
              <div class="card h-100 text-center">
                <img class="card-img-top" src="img/mohamed.png" alt="Mohamed Chahchouhi">
                <div class="card-body">
                  <h4 class="card-title">Mo Chahchouhi</h4>
                  <h6 class="card-subtitle mb-2 text-muted">Production Planning</h6>
                  <p class="card-text">Mohamed serves as our production planner and has been Gerard's colleague since 2001. He bridges the gap between your requirements and the production team, ensuring that orders are fulfilled exactly as specified.</p>
                </div>
                <div class="card-footer">
                  <div class="text-center"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c61634c7e637878697e686d617f786969607b637e677f226260">[email protected]</a>"><button type="button" class="btn btn-primary"><i class="fas fa-envelope"></i> Send Email</button></a></div>
                </div>
              </div>
            </div>

            <div class="col-lg-3 mb-3">
              <div class="card h-100 text-center">
                <img class="card-img-top" src="img/battal.png" alt="Battal Ozturk">
                <div class="card-body">
                  <h4 class="card-title">Battal Ozturk</h4>
                  <h6 class="card-subtitle mb-2 text-muted">Workshop Manager</h6>
                  <p class="card-text">Battal is our hands-on supervisor who has been part of RSW since its inception. He ensures that your requests are fulfilled, serving as the link between all departments within the organization.</p>
                </div>
                <div class="card-footer">
                  <div class="text-center"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b797a6f6f7a775b69746f6f7e697f7a76686f7e7e776c74697068357577">[email protected]</a>"><button type="button" class="btn btn-primary"><i class="fas fa-envelope"></i> Send Email</button></a></div>
                </div>
              </div>
            </div>

            <div class="col-lg-3 mb-3">
              <div class="card h-100 text-center">
                <img class="card-img-top" src="img/mark.jpg" alt="Mark Ruiter">
                <div class="card-body">
                  <h4 class="card-title">Mark Ruiter</h4>
                  <h6 class="card-subtitle mb-2 text-muted">Business Developer</h6>
                  <p class="card-text">Mark has played an integral role in RSW's growth since its establishment. Apart from managing the firm's ERP system, he possesses extensive market knowledge, enabling him to lead innovation within the industry.</p>
                </div>
                <div class="card-footer">
                  <div class="text-center"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670a06150c2715081313021503060a141302020b1008150c1449090b">[email protected]</a>"><button type="button" class="btn btn-primary"><i class="fas fa-envelope"></i> Send Email</button></a></div>
                </div>
              </div>
            </div>

          </div>
          <!-- /.row -->

        </div>
        <!-- /.container -->

    </div>
    <!-- /.background -->

    <?php require_once('includes/footer.php'); ?>

  </body>

</html>
htmlcsstwitter-bootstrap

Answer №1

Perhaps this solution could be helpful for you:

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Resolve the issue with IE 10-11 `min-height` bug. */
}
.content {
  flex: 1 0 auto;
  padding: 20px;
}
.footer {
  background: blue;
  flex-shrink: 0; 
  padding: 20px;
}
<div class="content">
  <h1>Sticky Footer with Flexbox</h1>
  <p>Text here...</p>
</div>

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

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

Aligning multiple 'divs' horizontally with different lengths of text

I have a set of 3 identical divs with fixed width. Each contains text of varying lengths and another nested div that is aligned to the right using float. When the text lengths are equal, they align perfectly. However, when the text lengths differ, the ali ...

htmlcss

Struggling with implementing Bootstrap modal JavaScript in Rails 4, nothing seems to work!

This situation has been addressed in numerous posts, but despite my efforts to find a solution among them, I have yet to come across one that works for me. I am faced with the task of opening a modal that requires JavaScript modifications before being dis ...

javascriptjqueryruby-on-railstwitter-bootstrap

Avoid making the check mark disappear in an SVG animation

After perfecting my CSS animation, I have the circle looping around to complete its shape while a check mark fills in the middle with a slight delay. Once both shapes are completed simultaneously, the check mark disappears. The reason for the disappearing ...

csssvgcss-animations

I am having trouble grasping the concept of CSS and the first-child selector

I am having an issue with the first-child selector in CSS. I have two divs with the same class, each containing an image and a paragraph element. When I use the .div-class:first-child {margin:10} rule, the margin is only applied to the paragraph in the fir ...

htmlcss

Are HTML files and PHP generated files cached differently by web browsers?

My current setup involves Nginx as a web server and Firefox to check response headers. I added two files on the server - test.html and test.php, both containing the same content. In the Nginx config file, I have set the expires directive to 30d in the serv ...

phphtmlcachingnginx

What could be causing my form not to Submit when attempting submission without utilizing the submit button?

Here is the code for my validation: $(function () { function validateForm() { // Code to validate form inputs } $('#myform').submit(validateForm); }); After this, I want to submit the form when a certain action occurs: < ...

javascriptjqueryhtmlforms

Updating borderWidth dynamically in react native fails to produce the desired effect

Here is the code I am working with: const [focused, setFocused] = useState(false); <TextInput style={{ ...styles.inputStyles, borderColor: `${focused ? colors.darkPurple : "#b8b8b850"}`, borderWidth: `${focused ? 3 : 1}`, }} placeh ...

cssreact-nativebordertextinput

Proper method for posting an object array through a form submission

I am currently integrating a payment service API into my application and following the instructions provided on their website. The documentation specifies that the POST body should have the following structure: api_hash=38be425a-63d0-4c46-8733-3e9ff662d62 ...

htmlajaxasp.net-mvchttppost

Prevented: Techniques for providing extra cushioning for a button, but with the condition that it contains an external icon

How can I apply padding to a button only if it contains an external icon? If the button has an external icon, I want to give it padding-right: 30px (example). However, if there is no external icon present, then the button should not have the 30px padding. ...

javascripthtmljquerycsscss-selectors

Enhancing the appearance of individual cells within an HTML table by applying custom classes

I'm in the process of automating report generation for my organization. Our workflow involves using R to summarize data from Excel, then utilizing Rmarkdown, knitr, and the "htmlTable" package to generate HTML files. Currently, I am implementing CSS ...

javascripthtmlrhtml-table

Insert information into the <div> element

Sorry if this is a repeated question, but I'm struggling to locate the solution. Is there a way to use jQuery to add content within a div, depending on its current class? For instance, adding "CODE" to a div such as: <div "CODE" class="class_one" ...

jqueryhtml

How to output a string in jQuery if it includes a certain character?

I need to extract all strings that include a specific word within them, like this: <div> <div> <span> <h3>In Paris (Mark Bartels) worked for about 50 years.</h3> </span> </div> ...

javascriptjqueryhtml

Utilize the jQuery ajax post method within each loop to handle asynchronous requests, ensuring that the

I am currently working on a jQuery ajax function that is embedded within an each function as it needs to be executed for each post on the website. $('.post .button').each(function() { $(this).click(function() { $.ajax({ url: 'action ...

phpjqueryhtmlcssajax

Tips for implementing a method to switch CSS properties of a main container by using a checkbox within its child element in a Svelte component

It took me a while to figure this out, but I still feel like my implementation is not ideal. I'm confused as to why things break when I remove the checkedActivities.has(activity) ? "checked" : "unchecked", because I thought TypeScr ...

htmlcsstypescriptsvelte

Unable to render canvas element

Hey guys, I'm trying to display a red ball on the frame using this function but it's not working. I watched a tutorial and followed the steps exactly, but I can't seem to figure out what's wrong. Can someone please help me with this? I ...

javascripthtmlcanvas

Changing the height of a table row using CSS transitions

I need help with a CSS table that has rows of the same height. I want to make it so that when a user clicks on one row, that row expands to fill the entire table height while the other rows fade away. I originally had this working by setting display:none o ...

csscss-transitionscss-tablesrow-height

How can I successfully transfer all user information when the edit button is clicked?

A new display page has been developed using php to show all user records in a table. The page includes delete and edit buttons for managing users. While the delete option is working fine, there is an issue with getting the edit button to function correctly ...

phphtmlmysqlforms

JavaScript popup is no more visible on the webpage

Recently, I implemented a pop-up on my website that used cookies to prevent it from appearing every time a user visited a page. However, after making this change, the pop-up stopped showing altogether. Despite my best efforts in testing, researching, and s ...

javascriptjqueryhtmlcss

Creating dynamic text overlay on images using CSS with adjustable position

I have a collection of 11 divs, with 8 containing images and 3 displaying ':'. https://i.sstatic.net/Vfljg.png All 11 boxes are enclosed within a class called "timer", structured as shown below: <div class="timer"> <div><img&g ...

htmlcss

What is the best way to generate a box when a button is pushed?

How can I make a button create a box with text inside it when clicked? <div class="trades"> </div> <button onclick="create()">add</button> Here is the JavaScript function to create the box: function create() { var box = docu ...

javascripthtmldom