Content overlapped by Bootstrap footer

I've been grappling with this problem for quite some time now. Despite finding numerous discussions on the issue, none of the proposed solutions seem to work for me.

My website utilizes a Bootstrap 3 front end and I am aiming to establish a sticky bottom footer through Bootstrap's navbar navbar-fixed-bottom styles. While it is effectively in place, the issue arises when the content starts overlapping with the footer due to limited space. I am seeking a solution that allows me to scroll the content while keeping the footer and header fixed, ensuring the footer does not scroll along with the content.

Feel free to visit the website to experience the problem firsthand by adjusting your browser's height.

Any assistance on this matter would be greatly appreciated!

htmlcsstwitter-bootstraptwitter-bootstrap-3sticky-footer

Answer №1

Hello Icemanind, to address your issue, I made the following adjustments:
I increased the height of the body element.
I applied the background image without using the body tag and made it fixed.
This allows for scrolling while keeping the menu and footer in place.
Additionally, I set the background image to not repeat.

Does this align with your requirements?

Check out the Fiddle for reference.

Unfortunately, the link to your custom CSS didn't cooperate in the Fiddle, but it works fine in a mock-up.

<style>
body{
   height:2000px; 
}
.bg-image {
    position: fixed;
    width: 100%;
    height:100vh;
    background: url('http://upload.wikimedia.org/wikipedia/commons/d/d3/Albert_Einstein_Head.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: -100;
}    
</style>

Update:

I made a modification to the Fiddle by including a transparent content area that is 2000px in height.
Some bottom margin has been added to this content as well. Take a look now to see if it meets your needs.
Access the full-size Fiddle here.

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

Issue with setting active class on current html page using Bootstrap 5 and Flask

I am currently developing a flask web application and I am focusing on customizing the navigation bar. Utilizing bootstrap 5 for styling purposes, I am attempting to apply the 'active' class when a specific navbar page is clicked with the followi ...

htmlflaskbootstrap-4navbarbootstrap-5

Tips for creating a horizontally scrolling div

Here is the CSS for the div that needs to be able to scroll horizontally: .form-holder{ padding-left: 20px; width: auto; background: ; overflow-x: auto; max-height: 300px; padding-bottom: 30px; } Every ...

jquerycss

Issue with Submit Button Functionality in Django Form Submission

I'm currently facing an issue with an HTML template I built using Bootstrap. My problem lies in the fact that I have a JavaScript function that dynamically adds rows to a Django form with specific fields whenever I need to. However, when I add a row, ...

javascripthtmlcssdjangobootstrap-5

What is the best way to incorporate JQuery into html content retrieved through an ajax request?

In my jsp file, there is a div structured like this : <div id="response" class="response"></div> After triggering an ajax call to a servlet, the content of this div gets updated with the following elements : <div id="response" class="res ...

javascriptjqueryhtmlajaxjsp

Streamlining the process of formatting URLs?

I was pondering if there is a more efficient method to accomplish this task. I extract links from a webpage, but many of them are relative. for example /index.html for instance /home.index.html Currently, my approach involves adding the home URL to compe ...

javahtmlstringjsoup

In regards to navigational bars that are oriented horizontally

Trying to create a simple navigation bar with horizontal links but facing issues. Can't seem to make it work despite following examples online: <!-- Navigator --> <div id="nav"> <ul> <li><a href="#"& ...

htmlcssnavigation

Bootstrap CSS: image is overlapping text inside a div

In my layout, I have four inner div containers arranged as follows: small picture - text - small picture - text. <div class="container"> <div class="col-md-12"> <div class="row"> <div class="col-sm-2"> <div c ...

htmlcsstwitter-bootstrapbootstrap-4

Issues with displaying form/button glyphicon when using a fixed table header in Bootstrap

I have a situation where I have a table with a fixed header. In one of the columns, there are delete buttons within a form. The table structure is as follows: <div class="panel panel-default table-responsive fixedHeader"> <!-- Table --> &l ...

htmlcss

What is the best way to define a:link style within a div class structure?

I am trying to include an anchor tag within my HTML... Inside the tag, I have the following CSS code: .foo { white-space:nowrap; text-shadow: 0 -1px 0 #000; color: #000; font-family: Helvetica Neue, Helvetica, arial; font-size: ...

csshtmlstylesheet

Combining Bootstrap with Rails

As I delve into the official documentation on incorporating Twitter Bootstrap in Rails, I stumbled upon an interesting tidbit: It mentions to eliminate all the *= require_self and *= require_tree . statements from the Sass file and opt for @import to im ...

cssruby-on-railstwitter-bootstrap

JavaScript button mouse enter

There seems to be an issue with this code. The button is not functioning properly after hovering over it, even though it was copied from the instructional website where it works fine. <html> <head> <title>Button Magic</t ...

javascripthtmlcss

Display a JQuery dropdown menu depending on the ID of the current section

In my one-page structure, I have multiple sections with a categorized nav-bar that includes drop-down lists for each category. My goal is to display the drop-down menu of the category corresponding to the current section. if($("#About").hasClass('act ...

jquerycssdrop-down-menunavbar

C#: Issues with loading static content in MVC on various environments with IIS

Within my C# MVC 4.5 Website, I recently introduced a new folder to host CMS-type applications separately from the main site. While everything seemed fine during local testing, issues arose after deploying the updates to the DEV environment. A closer look ...

c#cssasp.netasp.net-mvciis

Show varying HTML headers on the initial page as opposed to subsequent pages

Currently, I am utilizing an HTML to PDF Library known as Nreco for converting HTML Pages into PDF format. The task at hand involves implementing a consistent header on every page, with the exception of the first page that should display the Recipient Addr ...

c#htmlcssnreco

Looking to incorporate multiple accordion drop down menus on your website? Utilize a combination of HTML, CSS, and JavaScript to

I am experiencing a challenge with implementing multiple accordion menus on my website. Whenever I attempt to duplicate the code, the new accordion menu appears but clicking on the first bar simply scrolls me back to the top of the webpage. Below is the H ...

javascriptjquerycsshtml

Collision of CSS styles with a different CSS stylesheet causing conflicts

Currently, I am in the process of developing a website and have encountered a specific issue. Within my page, there are various divs and tables present. I have meticulously crafted classes and styles to customize the appearance of these elements to align ...

jqueryhtmlcss

How can you leverage Beautiful Soup to extract data from a specific CSS class on a webpage?

In the process of scraping this html with code, my main objective is to extract the link from it using Selenium driver. html = driver.page_source soup = BeautifulSoup(html) file_link = soup.select(".inpfilelink") return file_link print file_upload("/hom ...

pythonhtmlbeautifulsoup

Changing the name of a tab within a p-tabview

Setting up a p-tabview with tabs containing specific content involves the following code: <p-tabView class="tabmain" > <ng-container *ngFor="let tab of tabs"> <p-tabPanel [header]="tab.header" > ...

cssangulartypescriptprimengprimeng-turbotable

Event handler for the MouseLeave event is not successfully triggering when dealing with anchor

When viewing a link to a Codepen, the issue is most noticeable in Chrome: https://codepen.io/pkroupoderov/pen/jdRowv Sometimes, the mouseLeave event fails to trigger when a user quickly moves the cursor over multiple images, resulting in some images reta ...

htmlcssreactjshovermouseleave

Hiding Bootstrap Popover When User Clicks Outside of it

My webpage has dynamically loaded content featuring popovers which need to be bound to the body for correct loading and appearance. I am looking for a solution to hide the popovers when a user clicks outside them or on another popover trigger. After some ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3