Footer covering up content on small screen display

I've encountered an issue with a footer that won't stick to the bottom of the page. I'm pretty sure it's just a small oversight on my part, as I've successfully implemented this feature before. I've cleaned up the page to make it easier for you to spot what I'm missing. The footer behaves correctly when the content doesn't overflow, so if you remove some <br /> tags in the content code, you'll see it stays at the bottom as intended.

http://jsfiddle.net/MS4KJ/

#footer{
    position:absolute; 
    bottom:0px;
    width:100%;
    background-color:#aaa;
    color:#fff;
    text-align:center;
    height: 100px;
    left:0px;
}

Appreciate your help!

htmlcss

Answer №1

For optimal results, it is recommended to utilize the following CSS:

position: relative;

If you are aiming for a sticky footer, you may find this thread useful: Creating a CSS footer that stays at the bottom of the browser window or content

Additionally, you can explore this website for more information:

Update:

Consider adjusting the body padding to 0px and the footer margin to 0px, while also eliminating the footer left: 0px property. This should help eliminate any white spaces around the footer. Refer to this resource for further assistance:

Answer №2

Modify it to:

#footer{
    position: relative; 
    bottom:0px;
    width:100%;
    background-color:#aaa;
    color:#fff;
    text-align:center;
    height: 100px;
    left:0px;
}

Otherwise, determine the maximum height and set a min-height for the #content.

#content {min-height: 350px;}

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 the perfect balance: Centering and fitting an image into a div without any loss

As I delve into learning CSS, I keep stumbling upon solutions that are almost there for what should be a simple task. Being at a very basic stage of my learning journey, I am struggling with figuring things out. My current challenge involves placing one i ...

csshtmlcenteringstretching

Navigate to the previous or next page using JavaScript

I've been struggling to figure out how to navigate one page up and down using simple links, but I haven't found a solution that works for me. The URL I am working with is: . When the "next page" button is clicked, it should go to ?page=2, and whe ...

javascriptphpjqueryhtml

A guide on restricting overflow in React Spring Parallax 'pages'

Currently, I have integrated React Spring Parallax () into my project found at this link: https://codesandbox.io/s/parallax-sticky-scroll-2zd58?file=/src/App.js Upon clicking the button to navigate to the next section, it is noticeable that the image over ...

cssreactjsparallaxreact-spring

Tips for utilizing a variable within a variable containing HTML code

Is it possible to incorporate variables in a JavaScript function that includes HTML code? Let's consider the following example: function SetCFonts() { var Color = $('#CColor').val(); var Font = $('#CFont').val(); var S ...

javascripthtmlcssvariables

Verify the presence of plain ASCII text

I need to verify if the file uploaded is in ascii plain text format. Can you suggest a method? $("#my_file").change(function(){ //alert if file is not ascii plain text }); <input type="file" name="my_file" id="my_file" /> ...

javascriptjqueryhtml

Checking for the presence of text within a span tag - a simple guide

see fiddle if there is an already allotted time slot for the patient, change its color to yellow using jquery on the client side. In my example, if I assign a time slot for the first time, it turns green and when assigning another one, the previous slot tu ...

javascriptjqueryhtml

Drag and Drop Feature using Angular with JQuery UI for Cloning Elements

I've been working on a web design project where I want to create a draggable user interface. https://i.sstatic.net/Be0Jk.png The goal is for users to click and drag different types of questions from the left side to the right side of the screen. Cu ...

javascriptjqueryhtmlangularjsjquery-ui

Bootstrap grid columns cannot properly handle overflowing content

Utilizing bootstrap version 5.2.3 I'm facing a challenge not with bootstrap itself, but rather my limited comprehension of the flex system and overflow. Displayed below is a scenario where the first div has a fixed height of 100vh. My goal is to kee ...

htmlcssflexboxoverflowbootstrap-5

Creating a PDF in Python from an HTML / CSS file with images: A step-by-step guide

Suppose I have an HTML / CSS webpage containing images, and I am looking to create a PDF using Python - is this feasible? ...

pythonhtmlcsspdfpdf-generation

Guide to verify the user selection within a select form

Here is a form with a select field: <form method="post" name="posting_txt" onSubmit="return blank_post_check();" id="post_txt"> <select style="background: transparent; border-bottom:5px;" name="subname" class="required"> ...

javascriptjqueryhtmlajaxjquery-plugins

Accessing an HTML file in the browser using an npm script

I have been searching for a solution that doesn't involve installing an npm package to host the file on an http server. All I need is to open a basic HTML file from my local computer in a browser using an npm script, without needing a server. Is there ...

htmlnode.jsnpmhosting

What's the best way to make sure an image and text are perfectly aligned on the

How can I align an image and text on the same line, as currently the a tag is higher than my text? Here is the HTML code: <div class="author-name"> <img class="article-author-img" src="{{ preload(asset('assets/st ...

htmlcss

Is there a way to prevent elements on a web page from shifting when the page width becomes narrow enough?

Currently, as I delve into the world of web development with Svelte, I am in the process of creating a basic website to put my knowledge to the test. The main aim is to ensure that no matter how much the page is resized, the text and video content remain e ...

javascripthtmlcsssvelte

Trigger the animation with a button click by utilizing ng-class in Angular.js

How can I make an animation run more than once when a button is clicked? I've tried using ng-class but it's not working as expected. Any help would be appreciated. Thank you! <div ng-controller="MyCtrl"> <div class='contendor_port ...

javascriptcssangularjs

When a div is created outside of the viewport, the overflow scroll feature will fail to function properly

I am currently working on developing a full screen slider with a unique feature on the last slide: a horizontal scrolling area. To achieve a smooth animation, I am using CSS translations to bring the div within the viewport. Oddly enough, the scrollbar do ...

javascripthtmlcssscrolltransition

What are the steps for showcasing a personalized HTML tag on a web page

I need to capture user input text and display it correctly. This is what I have attempted: <div> <input type="text" ng-model="post.content" /> </div> <div> <div ng-bind-html="post.content| htmlize"></div> < ...

javascripthtmlangularjs

Application that exclusively launches the web browser

Recently, I created a basic website and now I am looking to make it accessible on mobile devices. My plan is to develop an app that opens a browser without displaying the tab bar or URL bar. I want to achieve this for both Android and iOS platforms. Are t ...

phpandroidjqueryhtmlios

What is the process for closing the side menu by clicking on the dark area?

I created a basic side navigation menu. When you resize the window to a smaller size, a red square will appear. If you click on this red square, the menu will open. The menu opens correctly, but I want it to close when I click on the dark area instead of ...

javascripthtmlcss

Issue with jQuery click event not activating on initial click but functioning properly on the subsequent click

I am currently implementing the jquery.ime editor in my project, which allows for multi-language editing capabilities. The library I am using can be found here. By default, the language JSON files are loaded on "change" events. However, I would like this f ...

javascriptjqueryhtmlangularjquery-plugins

Interactive Javascript Dropdown Selection

I'm currently developing a registration page for a website and I've added a drop-down box that explains to users why we need their birthday. However, I seem to be having issues with my code. Take a look at the script below: <script language=& ...

javascriptphphtmlclient-sidejquery-events