Hide the footer DIV in CSS by making it disappear with a height of 100%

Question

Hide the footer DIV in CSS by making it disappear with a height of 100%

I'm currently facing an issue with my CSS layout. Despite managing the problem in IE and seeing everything work well, the footer container has mysteriously disappeared! I've attempted to recode the CSS without success, even after trying for days to resolve it.

I'm at a loss as to what I may have overlooked!

For reference, here is the code I used:

<a href="http://jsfiddle.net/RA2pj/" rel="nofollow">JSFiddle</a>

If anyone could offer insights into what I might be missing, I would greatly appreciate it!

css layout height

Answer 1

Answer №1

there seems to be an issue with this section in the stylesheet:
display: none;

it's causing the footer to disappear

Answer 2

there seems to be an issue with this section in the stylesheet:
display: none;

it's causing the footer to disappear

Answer 3

Answer №2

By setting the body to have hidden overflow and then giving the #container element 100% height, the footer container is being pushed off the bottom of the screen. If you were to remove the overflow declaration, allowing scrolling, the footer would be visible right below the fold.

If your intention is to have a non-scrolling page (which is typically not recommended for usability reasons), you can use the position property to stick the footer to the bottom of the screen:

#foot{
 width: 800px;
 height: 150px;
 background: #FFD700;
 position:absolute;
 bottom:0px;
}

View the result here: http://jsfiddle.net/euT3x/

Alternatively, you can either remove the overflow declaration or calculate the height of #container with JavaScript after the page has loaded.

For more information, check out the following resources:

MDN's documentation on the CSS position property - https://developer.mozilla.org/en-US/docs/CSS/position
MDN's documentation on the CSS height property - https://developer.mozilla.org/en-US/docs/CSS/height

Answer 4

By setting the body to have hidden overflow and then giving the #container element 100% height, the footer container is being pushed off the bottom of the screen. If you were to remove the overflow declaration, allowing scrolling, the footer would be visible right below the fold.

If your intention is to have a non-scrolling page (which is typically not recommended for usability reasons), you can use the position property to stick the footer to the bottom of the screen:

#foot{
 width: 800px;
 height: 150px;
 background: #FFD700;
 position:absolute;
 bottom:0px;
}

View the result here: http://jsfiddle.net/euT3x/

Alternatively, you can either remove the overflow declaration or calculate the height of #container with JavaScript after the page has loaded.

For more information, check out the following resources:

MDN's documentation on the CSS position property - https://developer.mozilla.org/en-US/docs/CSS/position
MDN's documentation on the CSS height property - https://developer.mozilla.org/en-US/docs/CSS/height

Answer 5

Answer №3

Insert the Footer DIV inside the MID div and update your CSS as shown below: JSFIDDLE link provided

#mid{
    background: #666666;
    width: 563px;
    text-align: center;
    height: 100%;
    position: relative;
}
#foot{
 width: 800px;
 height: 150px;
 background: #FFD700;
 position: absolute; bottom: 0; left: 0;
}

Access the JSFIDDLE demo here

Answer 6

Insert the Footer DIV inside the MID div and update your CSS as shown below: JSFIDDLE link provided

#mid{
    background: #666666;
    width: 563px;
    text-align: center;
    height: 100%;
    position: relative;
}
#foot{
 width: 800px;
 height: 150px;
 background: #FFD700;
 position: absolute; bottom: 0; left: 0;
}

Access the JSFIDDLE demo here

Hide the footer DIV in CSS by making it disappear with a height of 100%

Answer №1

Answer №2

Answer №3

Similar questions

Some of the Tailwind CSS colors may not be fully supported by Next.js for rendering

Step-by-step guide on crafting a scrolling marquee with CSS or Javascript

Customizing Your Keyboard Design with CSS

What is the best way to align my Navbar in the center?

Why won't applying a binding style affect the appearance of my Vue component?

Text cannot be aligned

Implementing event handling with .On() in Jquery following .Off()

Clickability of links on an element is lost when it is positioned behind another element that is fixed

JavaScript: How can I remove it when I click anywhere on the webpage with onClick?

The bottom border of the check boxes is not displaying in Internet Explorer

Flexbox margins (exceeding 100% total width)

Incorporating <span> elements into a comma-separated list using Jquery on every other item

Can both Bootstrap 5 scroll-spy methods be utilized simultaneously on a single webpage?

The sequence of divs in a language that reads from right to left

Configuring static files in Django for hosting a website in production mode

Manipulating Div Content with JQuery Based on Checkbox Selections

SwipeJS is not compatible with a JQuery-Mobile web application

Alternative to using the disabled attribute in JavaScript to make a checkbox read-only option

Create a CSS menu that centers the links

Showing content in a single line causes it to drop down to the next