Footer remains attached to the bottom of the page while the content extends too far down

Having some trouble with my sticky footer - despite checking out various resources and examples, I can't seem to achieve the desired outcome.

Update: I don't want the footer to be fixed. I want it to stay at the bottom of the screen if there isn't enough content to push it down, but to move down if necessary.

For my complete CSS code, visit:

Key CSS code:

html,
body {
  height: 100%;
}

.wrap {
  min-height: 100%;
  height: auto;
  margin: 0 auto -42px;
  padding: 0 0 42px;
}

footer {
  height: 42px;
}

Relevant HTML:

<?php get_header(); ?>

    <div class="row wrap">

        <div class="col-sm-12 blog-main">

            <?php
            if ( have_posts() ) : while ( have_posts() ) : the_post();

                get_template_part( 'content', get_post_format() );

            endwhile; endif;
            ?>

        </div> <!-- /.blog-main -->

        <?php get_sidebar(); ?>

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

<?php get_footer(); ?>

View this layout at

Answer №1

To modify your footer style, try the following:

footer {
height: 50px;
bottom: 0;
position: fixed;
width: 100%;
}

You can also apply this code to your blog-footer class:

bottom: 0;
position: fixed;
width: 100%;

Answer №2

If you're looking to make your footer always visible as you scroll, consider including the following CSS properties:

position: fixed;
z-index: 1000;

Applying these styles will make sure your footer stays in place on the screen, overlapping the scrolling page content. Hopefully, this solution helps!

Answer №3

insert a new class to the element blog-masthead right after the container class

Here is the corresponding CSS code:

.className{
  min-height: calc(100% - 247px);
}

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

Maintaining fixed position for cursor events in CSS

Here is a simple popup I created using tailwindcss to display project descriptions. Take a look at the code snippet below: // Code snippet here... I am facing an issue where both the container (outer div) and the first inner div have the same click event. ...

Is there a way to continuously cycle through multiple images fading in and out at various locations on a webpage using absolute positioning?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Harley's Art Gallery</title> <script t ...

(Reactjs) Steps to automate submission of file upon selection

I'm having trouble figuring out how to automatically submit an image using an input field without a submit button. My current approach involves selecting the file and then submitting it automatically. Here's what I have so far: const [image, setI ...

What is the best way to transfer the value of a <span> element to a different <div> using jQuery or JavaScript

Is there a way to move or copy the price and insert it into the <div class="info"> using jQuery? The code I'm currently using is returning an unexpected result of "102030". jQuery(document).ready(function($) { $(document).ready ...

Having trouble making the JavaScript mouseenter function work properly?

Hi there, I'm having trouble with this code and I can't figure out why it's not working. $('#thumbs > li').mouseenter(function() { $(this).find("div").fadeIn(); }).mouseleave(function(){ $(this).find("div").fadeOut(); ...

The concept of min/max-width media query lacks grammatical coherence

I am struggling to grasp the concept of min-width and max-width media queries. If I were to create a media query, I would want it to look something like this (in pseudo-code).... if(screen.width < 420) { ApplyStyle(); } The idea of using terms l ...

Modify the Embed Audio Player in Google Drive

I am looking to integrate audio files from Google Drive into my website. While I have successfully embedded them, the issue lies in not being able to customize the player (as shown in the image below). Is there a way to modify the player? <iframe ...

What is the best method for overriding the CSS rule for input[type=checkbox]?

My checkmark follows this rule: input[type=checkbox] { display: none; } I tried to change it like this: <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" style="display:block;& ...

A guide on how to perfectly center a <ul> element on a webpage

After creating a ul element, I have customized the html and css for my navigation bar: Html: <ul id="list-nav"> <li><a href="Marsrutas.html">Item1</a> </li> <li><a href="Nuotraukos.html">Item2</a& ...

What other technique can I use to replace the creation of a jquery division?

I`m relatively new to all things related to web technologies and I am currently practicing and learning about them. On my practice page, I've experimented with various elements, including changing div heights based on the viewport height. Here's ...

The search function on my blog is not displaying the blogs that have been filtered

I have encountered an issue with my code as I am unable to get any search results from the search bar. const RecentBlogs = ({recentBlogs}) => { const [query, setQuery] = useState("") const filteredItems = (() => { if(!query) return rec ...

The Date Picker pops up automatically upon opening the page but this feature is only available on IE10

There seems to be an issue with the date picker opening automatically on IE10, while it works fine in Firefox where it only appears when you click on the associated text box. Does anyone have insight into why this might be happening specifically in IE10? ...

Unique rephrased text: "Varied wrapping styles in both

Feeling frustrated with a seemingly commonplace issue. Despite the thousands of times it has been asked before, I can't seem to find an answer on Google. I wanted to neatly display my text within one of my cards, but so far I've only achieved th ...

Group all 3 elements with a wrapper

I'm facing a challenge in trying to enclose 3 divs inside one wrapping div. I have successfully wrapped up 2 divs, but the third one is proving to be difficult. To see my progress so far, you can check out my JSFiddle here: http://jsfiddle.net/cz9eY/ ...

What is the best way to implement CSS properties on Material UI components?

I've recently started exploring Material UI, but I'm having trouble understanding how the spacing properties function. I'm trying to utilize the "spacing" feature for various elements, but it appears that it only works for "Box" components a ...

Unable to display background image and color on Internet Explorer

The background beneath the slider and footer appears normal in most browsers, but there seems to be an issue with Internet Explorer. Check it out at this link: Do you have any suggestions on how to fix this? ...

Aligning content with CSS styling

I am facing a challenge with aligning buttons in three different td tags, as the text content within each varies. I want the buttons to line up evenly regardless of the amount of text present. Is there a solution that does not involve setting a fixed parag ...

Tips for preventing a span from disappearing when a hidden div is displayed during onmouseover

, there is a concern about the disappearing behavior of the span with ID "topnavbar" when the display property changes from none to block on a hidden div using onmouseover event. The query is how to ensure that the span remains visible at all times. Additi ...

jQuery Counter Effect encountering isNaN error when trying to display a number retrieved from a get API object

I am looking to display the numerical data retrieved from an API using JSON. I want to incorporate a counter effect that displays "isNaN" if necessary. The API URL returns an object with the total number saved in data.data. Can anyone assist me with achi ...

Can a website be designed to mimic the style of the current operating system?

Is there a way to apply CSS styling to web site elements, such as buttons, that mimics the appearance of operating system (Windows, macOS, Linux) button styles? This would allow HTML buttons to automatically adjust their CSS style whenever I switch theme ...