Fixed footer under scrollpane in css

Question

Context

I am trying to create a page that would adapt to any sort of screen. This page contains a scrollable section and a fixed footer, always visible. I am using the vh (viewport height) so that the page never scrolls, only the content inside the scrollable container.

Problem

I can't seem to get the footer to align perfectly on every screen width and height (large screens down to mobile phones). This codepen of what I have already tried.

I don't understand why the width: inherit of my footer doesn't take the width of the survey-container. And it seems that using height in vh (scrollable container) and top in vh (footer) is not the way to go, but I don't know how to position them such as the page never scrolls (only the container).

Code

HTML


  
    

      

        Survey

        

          Ribs ribs corned strip hamburger landjaeger strip ribs round chuck pancetta cupim steak. Beef jowl boudin swine bacon kielbasa shank drumstick shank doner steak porchetta kielbasa frankfurter. Mignon drumstick drumstick hamburger pancetta corned brisket
          prosciutto shank ribs loin hamburger. Sausage turkey swine flank ribs corned round hock flank picanha kielbasa chuck rump turkey.
          

          
 Ribs ribs corned strip hamburger landjaeger strip ribs round chuck pancetta cupim steak. Beef jowl boudin swine bacon kielbasa shank drumstick shank doner steak porchetta kielbasa frankfurter. Mignon drumstick drumstick hamburger pancetta corned
          brisket prosciutto shank ribs loin hamburger. Sausage turkey swine flank ribs corned round hock flank picanha kielbasa chuck rump turkey.
          

          
 Ribs ribs corned strip hamburger landjaeger strip ribs round chuck pancetta cupim steak. Beef jowl boudin swine bacon kielbasa shank drumstick shank doner steak porchetta kielbasa frankfurter. Mignon drumstick drumstick hamburger pancetta corned
          brisket prosciutto shank ribs loin hamburger. Sausage turkey swine flank ribs corned round hock flank picanha kielbasa chuck rump turkey.
          

          
 Ribs ribs corned strip hamburger landjaeger strip ribs round chuck pancetta cupim steak. Beef jowl boudin swine bacon kielbasa shank drumstick shank doner steak porchetta kielbasa frankfurter. Mignon drumstick drumstick hamburger pancetta corned
          brisket prosciutto shank ribs loin hamburger. Sausage turkey swine flank ribs corned round hock flank picanha kielbasa chuck rump turkey.
          

          
 Ribs ribs corned strip hamburger landjaeger strip ribs round chuck pancetta cupim steak. Beef jowl boudin swine bacon kielbasa shank drumstick shank doner steak porchetta kielbasa frankfurter. Mignon drumstick drumstick hamburger pancetta corned
          brisket prosciutto shank ribs loin hamburger. Sausage turkey swine flank ribs corned round hock flank picanha kielbasa chuck rump turkey.
          

          
 Ribs ribs corned strip hamburger landjaeger strip ribs round chuck pancetta cupim steak. Beef jowl boudin swine bacon kielbasa shank drumstick shank doner steak porchetta kielbasa frankfurter. Mignon drumstick drumstick hamburger pancetta corned
          brisket prosciutto shank ribs loin hamburger. Sausage turkey swine flank ribs corned round hock flank picanha kielbasa chuck rump turkey.
        
      

      
        
          Footer
        
        
          
            Affogato saucer arabica Affogato irish lait cultivar acerbic strong blue mocha mazagran sweet frappuccino. Qui decaffeinated flavour galão Shop beans rich Dark to plunger qui trifecta cup sugar. Dripper ristretto redeye wings pot organic spice frappuccino
            cream cup barista Dark pumpkin. Aroma mazagran roast spoon shop flavour Variety Variety spoon robust spoon lait origin. Aftertaste robust single doppio Affogato milk aftertaste percolator Frappuccino siphon macchiato macchiato carajillo.

CSS

body {
    font-size: 16px;
    background-color: #ddd;
}

.well.survey {
    background: #FFF;
    padding: 0 0 50px 0;
    margin-bottom: 0;
    margin-top: 50px;
    color: #8591A0;
    height:71vh;
    overflow: auto;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.survey-container {
    margin: 0 100px;
    padding-top: 30px;
}

@media (max-width: 768px) {
    .survey-container {
        margin: 0 50px;
    }
}

.homepage-footer {
    background-color: #303A40;
    padding: 20px 30px 20px 30px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    -webkit-transform: translate3d(0, 0, 0);
    position: absolute;
    top: 80vh;
    width: inherit;
}

.homepage-footer p {
    color: #fff;
}

.footer-description {
    font-size: 12px;
    text-align: justify;
}

floorish · Accepted Answer

Your footer has a larger width than survey-container because it has a position: absolute. This means it takes the width of the closest parent with either position: absolute or position: relative.

To fix this, make your .row class position: relative.

(Do note that the top: 80vh is then relative to your .row class as well, not the top of your document)

Fixed footer under scrollpane in css

Context

Problem

Code

Answers (2)

Related Questions