Unwanted space between content and sticky footer - CSS-Tricks

This topic is empty.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
December 14, 2013 at 4:39 pm #158354
Brad Wrage
Participant
Hi folks! I’m building a site right now that will use a full background image and a sticky footer. I’m having some trouble though with some unwanted space that I have no idea where it’s coming from. There are no margin and height on the background photo container is set to 100%. Any ideas?

Link Here:

Much thanks.
```
<body>

  <div id="wrapper">
     <div class="top-nav">
      </div>

 <section class="background-photo">

  <div class="row">
    <div class="large-12 columns">
      <h1 class="hero-title">Hero</h1>
      <h2 class="header-subtitle">Description</h2>
</div>


<div>
  <a href="#">Learn More</a>
</div>

</div> 

 </div>
```
css
```
html, body { height: 100%; }

wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -60px;
}

wraper > *:last-child {

  padding-bottom: 60px;


}

.background-photo { 
margin-bottom: 0px !important; 
height: 100%;    
.hero-title { 
 color: white; 
 text-align: center; 
 padding-top: 100px; 
 } .header-subtitle { 
   color: white; 
   font-size: 24px; 
  text-align: center; 
  margin-bottom: 20px;    } }
```
December 14, 2013 at 5:55 pm #158361

Merri
Participant

Is #wrapper intended to be 100% height or not have 100% height? What should be between the elements as I see it would be quite expected for there to be empty space if you’re using a sticky footer and don’t have enough content to fill the rest of the space.

December 14, 2013 at 10:53 pm #158375

Brad Wrage
Participant

I’ve followed the example here, where the footer is in the 100% height wrapper. http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

December 14, 2013 at 11:02 pm #158377

__
Participant

A “Sticky” footer is supposed to stay at the bottom of the window when there would not otherwise be enough content to push it down. I couldn’t tell from an image, but I would suspect the problem is with your background photo… doesn’t look very “full.”

Screenshots aren’t very helpful when it comes to HTML+CSS. Can you link to your actual page? or recreate your problem on codepen?

December 15, 2013 at 2:22 pm #158402

Brad Wrage
Participant

Ok, Codepen here. Yuu can see that the gray hero does not extend down to the bottom footer even though I have it specified at 100% height. Is there something I’m missing here?

December 15, 2013 at 3:17 pm #158408

__
Participant

Ok, Codepen here.

No link.

One possibility is that you’re misunderstanding “100%” in terms of height—it means “100% of the container’s height,” which is determined not by the window, but by how tall its content is. Without seeing your code, I don’t know, of course; but this is a very common tripping point. In many cases, height:100% is a no-op.

Looking forward to your link.

(FYI, in your code sample above, your <section> is unclosed. Dunno if that’s contributing to your problem, or if it’s just a typo in your post.)

December 15, 2013 at 5:19 pm #158410

Brad Wrage
Participant

http://codepen.io/anon/pen/sLkeI

Ya, just a typo in the post.

December 16, 2013 at 11:10 am #158453

Brad Wrage
Participant

Ok, guys simple solution here. I just set the background photo to the whole wrapper and gave the nav a z-index.

December 16, 2013 at 11:34 am #158457

__
Participant

Yup, that’ll work.

I just looked at your pen, and everything is working as expected—the reason your gray bg didn’t extend down to the footer is that your .background-photo doesn’t extend that far. The sticky footer just pushes the footer down by expanding the .wrapper; it doesn’t expand other content for you.
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The forum ‘CSS’ is closed to new topics and replies.