What is the best method for keeping this div at the bottom of the webpage?

I am facing a major issue with my website, which is built on Joomla and uses a free template. The problem arises when I visit this particular page: . I have found that adjusting the margin of { p.stickynote } to { margin-bottom:300px; } resolves the issue. If you experiment with the { margin-bottom:300px; }, you will notice changes in the behavior of this element. Removing the margin will cause the div to appear in the center of the page. Although I added {bottom:0px;}{position:fixed;} to { div style="bottom: 0px;" id="footer-cover" }, the black banner at the bottom remains unchanged. Is there any advice on how to keep it fixed at the bottom of the site?

css

Answer №1

Your question is a bit unclear to me, but I'll take a stab at it anyway. It seems like you want your "black banner" to be positioned at the bottom of the browser window rather than the page itself, similar to the chat bar on Facebook.

To achieve this layout, you can use the following code:

<style>
  #header{}
  #content{margin-bottom:100px} /*to create space for the footer*/
  #footer{height:100px; position:fixed; bottom:0}
</style>

<div id="header" />
<div id="content" />
<div id="footer" />

Answer №2

The issue arises when the margin at the bottom is missing, causing the page height to be shorter than the window bounds. As a result, the footer div ends abruptly and the body content extends beyond.

What specific effect are you aiming for? Do you want the footer to constantly overlay content and remain visible, or simply stay fixed at the bottom of the page?

To achieve the first goal:

#footer-cover {
  position: fixed;
  background-color: #000;
  bottom: 0px;
}

body {
  background-color: #F5F5F5;
}

For the second objective:

  • If you desire a sticky footer technique, like the one demonstrated here (Thank you ZJR for the improved link), consider implementing a negative margin. While it may not be perfect, it tends to work effectively.

Hoping this aligns with your intended outcome.

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

Issues with responsiveness in Flexbox layout

My goal is to create a responsive design where both elements scale down when the screen size changes. However, I'm having trouble with alignment and can't figure out what the issue might be. #noteUIContainer { display: flex; position: abso ...

csslayoutflexbox

Is it possible to use jQuery to search an unordered list by simply pressing a key on the keyboard?

I have a list of countries displayed as an unordered list inside a table column. I would like to implement keyboard search functionality for quicker navigation within the list. <ul class="country-search"> <li id="1">Country 1</li> ...

jqueryhtmljquery-uicss

Using a slider in Cordova application

Currently, I am in the process of developing an app using Cordova. However, I have encountered an issue with the slider feature. HTML <body> <div id="slider"> <div id="custom-handle" class="ui-slider-handle"></div> </di ...

javascriptjqueryhtmlcsscordova

What is the best way to duplicate this content from a picture using CSS?

Trying to replicate text in an image using HTML and CSS. Wondering if there's a better way than setting each line with its own font size. Here's the image I'm working on: https://i.sstatic.net/bMPhy.png Current issues with the approach: ...

htmlcssbootstrap-4

Nav bar width remains stagnant despite varying content lengths

My navigation bar looks great with 5 objects, but as soon as I add 3 more, it suddenly drops below the main header. Why is this happening? 5 Objects: 7 Objects: HTML: <div id="header"> <div class="w960"> <div id="logo"> ...

htmlcsswidthnav

Updating the underline style of ant.d's menu item

Currently, I am working with ant.design to build my navbar. By default, the menu items in ant design have a blue-ish underline when selected or hovered over. However, I want to change this underline color to match the overall design of my project. I was su ...

cssreactjsantd

Issue: ng-select dropdown content is not visible when clicking the down arrow after dynamically searching for a result

Currently, I have implemented a ng-select dropdown for dynamically searching data. However, one issue that I've encountered is that when the search results are displayed and you click on the down arrow, the content is not visible as expected. You ca ...

javascripthtmlcssangularangular-ngselect

AngularJS and CSS: A Guide to Effortlessly Toggle Sliding List Elements

I am in the process of developing a drop-down menu that can be clicked. Using my custom AngularJS directive, I have successfully implemented functionality to load menu items dynamically. While I have made significant progress, I have encountered a small i ...

javascriptcssangularjstypescript

Header with a dropdown select option

In the process of developing a monitoring system, I am in need of a feature that allows users to select varying numbers of days. Here is the desired style: Previous [Dropdown Selection] Days https://i.sstatic.net/ysk6X.png Ideally, I do not want any bor ...

htmlcss

Visual Composer now appends "?id=" to the background images of columns and rows, enhancing the customization

I am in the process of improving the performance of a WordPress site that is using the Visual Composer plugin. When checking GTmetrix results, I came across this issue: Ensure resources are served from a consistent URL https://example.com/wp-content/uploa ...

phpcsswordpresspagespeedvisual-composer

What are the top Navigation options in SharePoint 2010?

I have customized the default top navigation in SharePoint 2010 using CSS styles. However, I also want to enhance it by adding icons (.png images) for each navigation menu item. For example, I would like to add an icon next to "Home", another one next to " ...

javascriptsharepoint-2010css

How can you adjust the height of flexbox items to be aligned?

I am struggling to create a unique flexbox layout with a large amount of text in the center area. As I resize the window (specifically reducing the height), I notice that the columns on the sides do not align properly with the main article, resulting in co ...

htmlcssflexbox

Customize bootstrap cards to have a full height and add a bottom margin to enhance the

My current project involves creating a grid of Bootstrap 4 cards that need to meet specific requirements: All cards must be contained within a single class="row" div. This is because the number of cards is unknown and I want the layout to adjust well acr ...

cssheightbootstrap-4marginbootstrap-grid

Include an additional tag solely by using a specific set of keys predetermined in advance

After getting inspiration from Stackoverflow, I decided to enhance my text-box with a tagging feature. The first step was downloading and adding the http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js file to my ASP.NET web folder, allowing me to u ...

javascriptjquerycssjquery-eventskeystroke

Is there a way for me to recreate the appearance of the outline and labeling found in Material-UI's outlined textfield?

Can anyone help me figure out how to hide the border behind the title text in an outlined textfield from Material-UI that I am trying to imitate? In the image below, you can see "Due Date/Time" taken from Material-UI library where the title hides the bord ...

cssreactjsmaterial-ui

In Internet Explorer, auto margins in Flexbox do not function properly when using justify-content: center

My table has cells that can contain both icons and text, with the icons appearing to the left of the text. There are different alignment scenarios to consider: Only an icon is present: The icon should be centered Only text is present: The text should be ...

htmlcssflexboxinternet-explorer-11

Can anyone lend a hand with styling this menu without relying on margins in CSS?

I've been working on a website and I've noticed a significant lag in Internet Explorer when hovering over the menus. It appears that Cufon is contributing to this issue, especially when applying height, width, margins, or paddings to the li:hover ...

htmlcsshtml-listsmargin

"CSS: Mastering the Art of Color Curves

Is there a way to achieve this with just HTML and CSS? ...

htmlcss

Issue persists with `overflow:auto` even when height is defined

As I was creating a website, I designed an exception holder on the side to capture every error thrown. To prevent the webpage from expanding endlessly in case of multiple errors, I am working on making it scroll instead. My approach involves using CSS an ...

javascripthtmlcss

What is the best way to show the title when a user hovers over a word?

Below is an illustration of the code: <p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines ...

htmlcsstooltiptitle