Trouble with Bootstrap 3: Footer refusing to stay at bottom of page

At work, I was given the task to create a mini-webpage layout using bootstrap. I decided to use an existing layout called Amoeba as my base. You can view the preview here.

Everything was working almost perfectly on the localhost, except for the footer. If you visit the provided link and click on Portfolio in the navigation menu, then filter the gallery by Photography, you'll notice an unsightly space when scrolling down. This is the issue I'm facing. I want to eliminate that space. I believe I need a footer or portfolio div class that will resize automatically. However, I'm unsure how to achieve this. Any suggestions?

csstwitter-bootstrapfooterfluid-layout

Answer №1

To make it function properly, simply make a small adjustment to the modernizr code. Set forceHeight to false and everything should work seamlessly.

if (Modernizr.mq("screen and (max-width:1024px)")) {
        jQuery("body").toggleClass("body");

} else {
    var s = skrollr.init({
        mobileDeceleration: 1,
        edgeStrategy: 'set',
        forceHeight: false,
        smoothScrolling: true,
        smoothScrollingDuration: 300,
            easing: {
                WTF: Math.random,
                inverted: function(p) {
                    return 1-p;
                }
            }
        }); 
}

Answer №2

It seems a bit puzzling that the body element is receiving some unexpected inline styling for its height. Regardless, let's address this issue with the following solution:

body {
    height:100% !important; // Adding "!important" to override inline styles
    position:relative;
}

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

To avoid applying position:relative and height:100%!important directly to the body element, you can create a wrapper div instead. Take a look at how it functions and decide on the best approach for your needs.

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

What is the best way to align an avatar within a cardHeader component in the center?

Recently, I've been working on a frontend project using Material UI. In my design, I have cards that display data, and I wanted to include an avatar in the center of each card. Despite using a card header to insert the avatar, I struggled to align it ...

javascriptcssreactjsmaterial-ui

Update the default arrow icon in the expand/collapse navigation bar

I need help changing the downward arrow in the code below to a fontawesome icon. I'm unsure about how to: 1. Remove the default arrow on the right of the parent node. 2. Use "+/-" symbols to represent the collapse state. It seems that the onclick c ...

javascriptjquerycsshtmlbootstrap-4

The discrepancy in percentages by a single pixel within Webkit

I am facing an issue with the positioning of two div elements. The first one has a height of 40% and the second one has a height of 60%. I have set the first element to be positioned at top: 0; and the second one at bottom: 0;. However, in Webkit browsers, ...

htmlcsswebkit

Basic alignment in a table and on a webpage using HTML

I have a basic HTML table that needs some alignment adjustments. <table align="center" border="1" cellpadding="0" cellspacing="0" style="width:1000px"> <thead> <tr> <th scope="row">BB<br /> ...

htmlcsshtml-table

Can I substitute custom tags for the traditional <p> tag?

My HTML with CSS has an issue where a custom HTML tag is not displaying the text while my CSS picks up another tag. Interestingly, replacing <title>Layout Controls</title> with <p>Layout Controls</p> resolves the problem and shows t ...

javascriptcsshtml

Tips for perfectly aligning all elements in a row within a card design

Hi there, I'm trying to figure out how to align the content of this card in a single row instead of stacked on top of each other. Here's the code snippet: <div class="container"> <form onSubmit={submitHandler}> ...

cssreactjsmaterial-ui

Learning the ins and outs of HTML5 and CSS3

Does anyone have recommendations for high-quality HTML5 and CSS3 tutorials? ...

htmlcss

What is the proper way to showcase thumbnails in different sizes?

Currently, this is what I have: https://i.sstatic.net/VOC2z.png The display looks optimal with high-resolution landscape photos. This is the HTML and CSS code in use: <div class="upload-thumb ng-scope visible"> <span class="delete-media"&g ...

javascripthtmlcss

Optimal selection of selectors for every type of button in an HTML document

In my current setup, I am utilizing the following selectors: input[type="button"], input[type="submit"], input[type="reset"], button Do you think this is a comprehensive selection of selectors to cover all potential buttons on a website? ...

cssselector

Bootstrap 5 introduces an innovative animated hamburger icon that transforms into an X symbol when clicked

I have encountered an unusual behavior when trying to animate the hamburger button using Bootstrap 5. Previously, with Bootstrap 4, everything worked smoothly. However, in Bootstrap 5, I noticed that the icon initially displays as 'X' and then sw ...

cssbootstrap-4css-animationsbootstrap-5

Empty space encompassing the entire sheet

While developing my website, everything seemed normal until I added a CSS document to my HTML page. Now, when we open the website , there is a white space around the entire page. I attempted to set the body class to container-fluid since I am using Bootst ...

htmlcssbootstrap-5

Personalizing Bootstrap 5 button designs and attributes for a customized look

In my project, I've set up my custom.scss file with the following code: $primary: #e84c22; $theme-colors: ( primary: $primary, ); @import "~bootstrap/scss/bootstrap.scss"; Currently, the color looks like this: https://i.sstatic.net/lbL ...

htmlcsstwitter-bootstrapsassbootstrap-5

Prevent Bootstrap 5 input fields from automatically adjusting to the height of a CSS grid cell

Below is some Bootstrap 5 markup that I need help with. The first example is incorrect. I don't want the Bootstrap input to be the same height as the grid cell. The second example is right, but I want to achieve the same result without using a wrapp ...

htmlcssbootstrap-5

Issue encountered while attempting to compress tailwindcss

I attempted to reduce the size of my tailwindCSS by creating a script in my package.json: "tw:prod":"NODE_ENV=production npx tailwindcss-cli@latest build ./src/css/tailwind.css -o ./public/css/tailwind.css", However, I encountered the ...

cssjsonnpmtailwind-css

Looking for specific styles within CSS classes

I am looking to identify all the classes with styling attributes defined using either vanilla JS or jQuery. Specifically, I want to find classes that have the border style defined along with its value. It would be great if I could also modify these classes ...

javascriptjqueryhtmlcss

I am looking to ensure that the ul li a() elements remain hidden until I hover over the h2 tag, at which point they will be displayed

Insert your code here : <table cellpadding="0" cellspacing="0" align="center" class="TblGreen"> <tr> <td> <h2><a href="#" class="AGreen">Sweater</a></h2> <p>The coding business</p> ...

htmlcss

Issues with CSS causing image resizing problems on Chrome, looking for solutions

On my website, I have favicons from various external domains. However, there seems to be an issue with resizing them when they are not 16px in size. Sometimes only the top or bottom half of the image is displayed, but upon refreshing the page, the entire i ...

htmlcssimage

Active tab in HTML

In my implementation based on this example code from https://www.w3schools.com/howto/howto_js_tabs.asp, I have a specific requirement. I want the tab for "Paris" to remain active even after the page is refreshed if the user has clicked on the button for "P ...

javascripthtmljquerycss

Troubleshooting a problem with the navigation links on a single-page website with a

https://i.sstatic.net/5xcv9.png My website alampk.com features a single page layout with a fixed navbar at the top. However, when I click on links like exp, portfolio, etc., the section moves to the top but a portion of 50px gets covered by the navbar. I ...

jqueryhtmlcsstwitter-bootstrap-3

The issue of duplicate tabs arising in AngularJS and AngularUI Bootstrap when a new tab is added

As I strive to create a reusable directive, complete with an isolated scope, for every new AngularUI tab, I encounter a peculiar issue. Whenever I attempt to gather all the data within a tab and add a new one, Angular seems to duplicate my existing tabs an ...

angularjstwitter-bootstrapangular-ui-bootstrap