What is the reason for Chrome not recognizing 'bottom: 0;' as a valid value for an absolutely positioned footer?

Question

What is the reason for Chrome not recognizing 'bottom: 0;' as a valid value for an absolutely positioned footer?

It seems like I may be facing a unique issue with my webpage layout in Chrome. The entire page is set up with absolutely positioned elements within a container that is relatively positioned. Although this setup is not typical, it was necessary for incorporating rotating images without using the CSS background property.

However, I have encountered an unexpected problem where the footer does not appear when positioned absolutely at bottom: 0; right: 0;

Here is the HTML structure:

<div id="wrapper">
  <div id="content">
  </div>
  <div id="footer">
    <ul>
    </ul>
  </div>
</div>

And here is the CSS styling:

#wrapper {
  position: relative;
  margin: 0 auto;
  width: 940px;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  height: 350px;
}

#footer {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
}

Update: Due to future content being added dynamically on a WordPress site, the height of the wrapper cannot be predetermined. However, adjustments can be made to set the height of the footer element.

html css

Answer 1

Answer №1

In case you are having trouble setting a height, consider removing the footer from the wrapper so it doesn't have a parent. The height of an absolutely positioned element is determined by its parent, and if the parent "wrapper" has no height, it will not align to the bottom.

Fortunately, the body will automatically go to the bottom.

You can find the code in this jsFiddles link.


#wrapper {
   position: relative;
   margin: 0 auto;
   width: 940px;
}

#content {
   background:#ccc; 
   position: absolute;
   top: 0;
   left: 0;
   height: 350px;
}

#footer {
   position: absolute;
   bottom: 0;
   right: 0;
   z-index: 10;
   background:papayawhip;
}

<div id="wrapper">
   <div id="content">
      sdfasdf
   </div>

</div>
<div id="footer">
   <ul>
      <li>aslfaskdjf</li>
   </ul>
</div>

Answer 2

In case you are having trouble setting a height, consider removing the footer from the wrapper so it doesn't have a parent. The height of an absolutely positioned element is determined by its parent, and if the parent "wrapper" has no height, it will not align to the bottom.

Fortunately, the body will automatically go to the bottom.

You can find the code in this jsFiddles link.


#wrapper {
   position: relative;
   margin: 0 auto;
   width: 940px;
}

#content {
   background:#ccc; 
   position: absolute;
   top: 0;
   left: 0;
   height: 350px;
}

#footer {
   position: absolute;
   bottom: 0;
   right: 0;
   z-index: 10;
   background:papayawhip;
}

<div id="wrapper">
   <div id="content">
      sdfasdf
   </div>

</div>
<div id="footer">
   <ul>
      <li>aslfaskdjf</li>
   </ul>
</div>

Answer 3

Answer №2

When the height of #wrapper is set to 0px, the #footer appears but with a height of 0px as well. Check out this example where you can see that the #footer has a red border on the right side.

If you give the #wrapper a specific height and also apply a height to the #footer, take a look at how it displays in this demo. Alternatively, to make the footer match the height of its contents, simply remove its height property.

Answer 4

When the height of #wrapper is set to 0px, the #footer appears but with a height of 0px as well. Check out this example where you can see that the #footer has a red border on the right side.

If you give the #wrapper a specific height and also apply a height to the #footer, take a look at how it displays in this demo. Alternatively, to make the footer match the height of its contents, simply remove its height property.

Answer 5

Answer №3

Indeed, the code above is correct. However, if your #wrapper has a relative position and your #footer is inside the #wrapper, the position of the #footer will be aligned according to the wrapper. If you set a height for the wrapper, it will become apparent. See below:

HTML:

<div id="wrapper">
  <div id="content">
  </div>
  <div id="footer">
    <ul>
your_content
    </ul>
  </div>
</div>

CSS:

#wrapper {
  position: relative;
  margin: 0 auto;
  height: 200px;
  width: 940px;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  height: 350px;
}

#footer {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
}

You can view an example here http://jsfiddle.net/8DZ5R/

Alternatively, another way to solve this is by simply changing the position of "#footer" from "absolute" to "static". This means you don't need to adjust the height of the wrapper. You can see the updated version here http://jsfiddle.net/8DZ5R/1/

Answer 6

Indeed, the code above is correct. However, if your #wrapper has a relative position and your #footer is inside the #wrapper, the position of the #footer will be aligned according to the wrapper. If you set a height for the wrapper, it will become apparent. See below:

HTML:

<div id="wrapper">
  <div id="content">
  </div>
  <div id="footer">
    <ul>
your_content
    </ul>
  </div>
</div>

CSS:

#wrapper {
  position: relative;
  margin: 0 auto;
  height: 200px;
  width: 940px;
}

#content {
  position: absolute;
  top: 0;
  left: 0;
  height: 350px;
}

#footer {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
}

You can view an example here http://jsfiddle.net/8DZ5R/

Alternatively, another way to solve this is by simply changing the position of "#footer" from "absolute" to "static". This means you don't need to adjust the height of the wrapper. You can see the updated version here http://jsfiddle.net/8DZ5R/1/

What is the reason for Chrome not recognizing 'bottom: 0;' as a valid value for an absolutely positioned footer?

Answer №1

Answer №2

Answer №3

Similar questions

Could you please advise me on where I should apply line-height in order for it to work properly?

Position elements flush to the left and right

Unusual syntax in Symfony framework

Exploring Bootstrap's Product sample and attempting to understand the process of incorporating images

Align the content of the list items to the center and position the list in the center of

Utilize jQuery, Flash, or HTML5 to upload an image

What is the method for eliminating the box shadow on a table?

Preventing the elements within a div section from shifting position

Function for editing a button in an AngularJS single page application

Divide text to reduce its width within the confines of a specific height on a div element

Enlarge the div with a click

Introduction screen in a JQuery mobile application for Android devices

Ways to attach an item using its lower point instead of its upper coordinate

Excessive CPU/GPU usage caused by CSS transition animations

Is the format of this HTML tag correct?

Linking two div elements together with a circular connector at the termination point of the line

Is it possible to visually distinguish the selected mat-grid-tile? Particularly when they are being created dynamically

Avoiding the repetition of CSS animations during Gatsby page hydration

Enhance the appearance of QTreeView items using a customized display delegate and CSS

Steps for displaying a bootstrap modal in alignment with the triggering button's position