The container or row I placed in the middle of the page content is not anchored to the bottom like it should be for footer widgets

I'm struggling with the code I've extracted. How can I move the footer widget to the bottom of the page? On some pages, the footer displays at the bottom because there isn't much content, but on one specific page, it appears in the middle of the content.

<footer id="colophon" class="site-footer" role="contentinfo">
  <div class="container">
    <div class="row">
      <div id="footer-widget-area" class="row">
        <div class="footer-widgets-1 col-md-12"></div>
      </div>
      <aside id="black-studio-tinymce-4" class="widget_black_studio_tinymce widget well">
        <div class="textwidget">
          <h6 style="text-align: center;">
            <span style="color: #000000;">© 2016 xxxx LLC | Location| Phone Number | <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c69616d65604c6b616d6560226f6361">[email protected]</a></span>
            <br>
            <em>
              <span style="color: #000000;"> All photos, designs, layouts, and content on this website, including blog, are under copyright, unless otherwise noted. If you would like to borrow an image and/or content, kindly request for permission.</span>
            </em>
          </h6>
        </div>
      </aside>
      <div class="col-md-9">
        <div class="site-info"></div>
        <div class="attribution">
          <span class="attribution-theme-mods">
            <a href="http://www.website.com/attribution/">Special Thanks</a>
          </span>
        </div>
      </div>
      <div class="col-md-3"></div>
    </div>
  </div>
</footer>
</div>
<div style="display:none"></div>

The display none property for the attribution is used to hide the WordPress attribution that I don't want to show.

Answer №1

Check out the updated version below:

http://jsbin.com/qepuxay/edit?html,css,output

Critical CSS:

html {
  height: 100%;
}

body {
  min-height: 100%;
  padding-bottom: 140px;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 140px;
  border-top: 1px solid red;
}

Please note that for this to work effectively, the footer height must be predefined. In this case, I have set it to 140px and added the same value as padding to the body. Additionally, a red border top has been included for better visualization.

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

Achieving uniform distribution of items within a flex container

I have been struggling since yesterday to make this work. I just can't seem to get these flex items to fill the container equally in width and height. No matter what I try, it's not cooperating. <html> <meta charset="utf-8"> ...

What is the process for customizing the onmouseover property in HTML?

I am currently working on customizing tabs. I want to underline the title of the active tab, but for some reason I am having trouble achieving this with CSS. It seems like I might need a CSS syntax that I am not familiar with. As a solution, I am consider ...

How can I make an element begin sticking to the page at 50px when scrolling, and then stop sticking at 2000px?

I am looking for a solution to position an image relative or absolute initially, then make it stick after some scrolling, and finally return it to its original behavior before transitioning to another section on the page. I've tried using this script ...

The utilization of Display Flex resulting in the enlargement of the containing div

I am currently learning CSS and trying out some new things. I am looking to create a page with two side-by-side divs: one for the sidebar and the other for the main content. My goal is to have the sidebar take up 400px of width and allow the content part t ...

show tab focus outline only

In search of a straightforward and effective method for focusable elements to display an outline only when the tab key is pressed, without showing it when using a mouse in React applications. (looking for something similar to :focus-visible that function ...

What is the best way to move table data content to a new line?

I have a table that spans the entire width of the screen, with 3 <td> elements inside. The content in the 2nd <td> does not contain any spaces and is quite long, causing it to expand beyond its allotted 70% width and disrupt the layout. Is ther ...

Ensure that grid rows occupy the least amount of space possible

I'm relatively new to grid layout and I've encountered a challenge that has me stuck. Here's what I have so far: codepen And this is the relevant part of the grid: grid-template: 'img date' 'img head' 'img s ...

Implementing a customized mobile style sheet for Google Maps v3

Currently, I am attempting to enforce the Mobile stylesheet for Google Maps v3 JavaScript within a jQueryMobile application. Within the screen stylesheet, the zoom control consistently stays in the top left corner and my efforts to relocate it have proven ...

Utilizing the Bootstrap 5 Alpha validation script within a React environment

I've been working on implementing Bootstrap 5 alpha's validation in my React app. https://i.sstatic.net/tbqLr.png The form should not submit if left blank, and it should display a check or an error mark at the bottom accordingly. So far, I&apo ...

Is there a way to create a dynamic CSS class without relying on the use of IDs?

Is there a way to create a dynamic CSS class without using an ID? $( "#mydiv" ).css( "width", $("#widthtextbox").val() ); $( "#mydiv" ).css( "height", $("#heighttextbox").val() ); I am looking to implement multiple CSS classes for this task. ...

Conceal mobile button

Welcome to my website: Is there a way to hide the button on mobile phones? I want to create different buttons specifically for mobile devices. Below is the HTML code for the buttons. HTML <a href="http://site9171756.91.webydo.com/Info.html" target="p ...

Choose an input that is not grouped with the rest

I am facing an issue where I need to group these three inputs together as one continuous form. However, there seems to be a problem with the select input not aligning correctly with the rest of the form. Is there something that I might be doing wrong? & ...

Adjust the table height to 25% and include a vertical scrollbar using Bootstrap styling

I have been working on designing a web page layout that includes two status tables positioned side by side at the top. While I have successfully set this up, I am facing an issue with implementing a vertical scroll feature specifically for the right-hand t ...

Align the text on the same horizontal line

I have been struggling with this issue for hours. Here is my Header.js <div className="navbar-inner"> <h2>Text1</h2> <h3>Text2</h3> </div> This is the content of my Header.css: .navbar-inner { ...

Optimizing WordPress with server-side AJAX caching

I am looking for a way to store AJAX responses on the server side rather than constantly retrieving data from the database every time a client makes a request. function post_filter($filter_action,$filter_values) { var ajaxurl = SiteInfo.home_url+&apos ...

Are background images covering hidden text detrimental to accessibility?

Is there a way to display images of text instead of actual text for my menu? I have implemented spans within each menu link. These spans have specific dimensions, block display properties, the text is indented to be hidden, and the background image is set ...

Is there a way to set a max-width using a Pseudo class

I am utilizing a css tooltip that is linked to a span element in the following manner: <span class="mytooltip" data-mytooltip="Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here."> Has Tooltip </ ...

The dividers flicker in and out of view

I have a menu with 7 elements, where clicking on an element causes its content to appear by fading in. If another element is clicked, the current content fades out and the new content fades in. I've successfully implemented this concept for 3 of the 7 ...

Tips for executing a function in the HC-Sticky plugin?

Currently, I am utilizing the HC-Sticky JavaScript plugin and endeavoring to utilize the documented reinit method. However, I am facing difficulty in understanding how to execute it. In this CodePen demo, a basic setup is displayed along with an attempt t ...

Sending data to a Bootstrap modal dialog box in an Angular application

Using span and ng-repeat, I have created tags that trigger a modal pop-up when the remove button is clicked. Within this modal, there is a delete button that calls a function. I am trying to figure out how to pass the id of the remove button to the modal ...