fixed footer with fixed height on parent container

I have successfully implemented a sticky footer on my web pages by following specific instructions.

http://css-tricks.com/snippets/css/sticky-footer/

The recommended approach includes using min-height:100% and not specifying the height property.

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}

However, there was one page where I had to set height:100% in .page-wrap in order to adjust the height of its children. Once I added this height property, the sticky footer stopped working and appeared in the middle of the page.

Is there a solution to make the sticky footer function correctly even when the height is set to 100% in .page-wrap?

htmlcss

Answer №1

Eliminate the height:100% property from the container-fluid class

.container-fluid {
 position: relative;
 min-height: 100%;
 /*height: 100%;*/ /*Removing the height will ensure proper functionality*/
 width: 100%;
 border: 1px solid green;
}

VIEW DEMO HERE

Answer №2

   .container-fluid 
   {
    position:absolute;
    bottom:0;
    height:100%;
    width:100%;
    border:1px solid blue;
   }

By making the footer always stay at the bottom of the page, this will ensure a consistent layout.

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

Using Flexbox for laying out content in both columns and rows

Hey there, I'm looking for a little help. It's been quite some time since I last built a website from scratch and I want to keep things simple this time around. I've used breakpoints before, but I'm curious if Flexbox could be a better ...

htmlcssflexboxmultiple-columns

Efforts to seamlessly combine two divisions of a business card through the use of CSS and HTML

Currently, I am working on designing a business card that includes both front and back sections. Below is the code snippet that I have been using: .business-card:hover .front{ transform: perspective(700px) rotateX(180deg); } .business-card .back{ tr ...

css

Changing the appearance of a website by switching CSS stylesheets according to the size of the browser

Trying to build two versions of my website: one for mobile devices or small browsing windows, and another for large browser windows. Looking to link HTML to different style sheets based on browser size. Current attempt in code only addresses total screen ...

javascripthtmljquerycss

Creating personalized dots in the owl carousel

I have successfully added custom previous and next buttons to my carousel using Owl Carousel, but I am having trouble displaying the navigation dots. Can anyone help me identify where I might have made a mistake? // owl.carousel.css .owl-controls { ...

htmlcssowl-carousel

Tips for disabling scrolling on a <div> using another <div> as a lock

I am facing an issue with a page where a div is appended to the body of an HTML. The problem is that there are two scrolls appearing - one on the new overlaying div and another behind it. Here is an approximate structure of the page, how can I ensure that ...

javascriptjqueryhtmlcss

Is it simple to customize the color of the close button in Bootstrap 5?

Bootstrap's v5 release brings updated styling to various components, including the close button. In previous versions, the close button had an "x" that could be easily styled with text properties, like inheriting color from its parent. However, in v5, ...

cssbootstrap-5

What is the proper way to arrange CSS classes in a specific order?

I am facing some confusion regarding the CSS and the class attribute. I had always believed that the order in which multiple classes are specified within the attribute value holds significance. It was my understanding that the later class could or should o ...

htmlcss

When hovering over a circle in CSS with a background image to hide text, the shape becomes distorted

I am attempting to create a series of circles with background images and accompanying text displayed side by side. My goal is to have the image opacity change and the text disappear upon hovering over each circle. Additionally, I do not want underlines to ...

csshoverbackground-imagegeometry

Combine the content from multiple text areas and submit it to another text area

****UPDATE**** Thanks to @JasonB, I was able to resolve the previous issue mentioned. Now, I have three additional textareas on the same form that should only appear when their respective checkboxes are clicked. How can I integrate this into my current sc ...

javascriptjqueryhtmlcss

How to ensure an absolutely positioned div spans the entire width of the screen

I am facing an issue with an absolutely positioned div that I want to stretch the full width of the screen using 100vw. However, the problem is that it aligns with its parent's starting point rather than the left side of the viewport. How can I make s ...

htmlcsscss-positionabsolute

Having trouble with ion-item click not functioning in Ionic 3?

Working on my Ionic 3 project, I have encountered an issue with the ion-item click listener. The scenario is that I am adding text over a canvas and then attempting to change the style of the text (such as font-family, font-size, bold, and italic). The UI ...

javascriptcssangularionic3angular6

Columns with adjustable widths

I am looking to create a layout with 3 columns (which may change, could be up to 4) that are all flexible width and fill the screen. Does anyone know if this is possible using CSS? Basically, I want three blocks lined up horizontally that take up the enti ...

htmlcss

Leveraging $this in conjunction with a jQuery plugin

I'm experimenting with a code snippet to reverse the even text in an unordered list: $(document).ready(function () { $.fn.reverseText = function () { var x = this.text(); var y = ""; for (var i = x.length - 1; i >= 0; ...

javascriptjqueryhtml

Mobile responsiveness issue with Bootstrap image heights

Creating a website with an image positioned at the top below the navigation bar. Utilizing Bootstrap 4 and CSS for this project. To ensure that the image spans the full width of the screen on larger devices, I employed background-image. For mobile devices, ...

cssimagemobilebootstrap-4height

What is the best way to utilize nav and main-nav in CSS?

Working with HTML and CSS <nav class="nav main-nav"> </nav> Styling with CSS main-nav li{ Padding:0 5% } I am a beginner in HTML and CSS and facing an issue. I noticed that when using main-nav in CSS, I'm not getting the de ...

htmlcssclass

Discrepancies in media screen queries displaying on inspection tools compared to actual device

I've done some research online but I'm still struggling with this issue. Despite creating media screen queries and setting the viewport for iPhone 7 plus, the website does not display correctly on my device. When I inspect it using Chrome, every ...

cssmedia-queries

Difficulty resizing background image on iPhone

I am having an issue with the background image resizing correctly on my website, specifically on iPhone (I have not yet checked iPad). You can view the site here. The dimensions of the image are 1393 x 1098 pixels. Below is the CSS code I am currently us ...

iphoneioscss

Is it possible to incorporate MUI React components within an iframe?

Looking to replicate the style seen in this Material UI website screenshot, I aim to design a container that will encompass my iframe contents, such as the navBar and menu drawer. However, I want to utilize Material UI's components for these elements. ...

htmlcssreactjsiframematerial-ui

Increase the div id using jQuery

I've got this code snippet here and, oh boy, am I a newbie. How can I increase the number in the div using a jQuery script? if($res >= 1){ $i=1; while($row = mysqli_fetch_array($qry)){ echo "<div clas ...

javascriptjqueryhtmlcss

extract individual components from the google books api

It has been quite a while since I last dabbled in JavaScript, so I decided to embark on a project creating a "bookcase" to organize the books I have read and those I still want to read. One challenge I encountered was figuring out how to separate the eleme ...

javascripthtmlcssapigoogle-books