min-height:100% on html `div` messes up footer

Question

I want to keep my footer at the bottom no matter the height of the page. I have been able to do this until i added a linear gradient for the background. I needed to add min-height:100%; on the html div to fill the whole page with the linear gradient background color. However now my footer has some blank space below it and its not completely at the bottom.

the pages where my height is long enough to scroll to the bottom the footer works right..
the pages where the height is the whole page without scrolling the navbar seems to have space underneath it. and it looks like it's sticking below whatever div came before the footer.

html {
  min-height: 100%;
}

body {
  background: linear-gradient(45deg, rgb(51, 173, 255), rgb(128, 255, 212))no-repeat;
  margin: 0;
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow: auto;
  padding-bottom: 200px;
}


/* must be same height as the footer */

#footer {
  position: relative;
  margin-top: -200px;
  /* negative value of footer height */
  height: 200px;
  background-color: #484848;
  opacity: 0.8;
  width: 100%;
  color: #fff;
  clear: both;
}

application.html.erb

<html>

<body style="min-width:1100px;">



  <div id="header" style="min-width:1120px;">

    <% if content_for?(:navbar) %>
      <%= yield(:navbar) %>
        <% else %>
          <%= render 'shared/navbar' %>
            <% end %>

  </div>


  <div id="wrap">
    <div id="main">

      <%= render 'shared/message' %>

        <%= yield %>

    </div>

  </div>

  <div id="footer" style="min-width:1120px;">
    <%= render 'shared/footer' %>

  </div>

</body>

</html>

Learn to format your code. It makes troubleshooting / maintenance MUCH easier. — random_user_name, Apr 19 '17 at 02:10
Do you have an example of your code somewhere? Can you post the compiled code somewhere we can see it working? — mluke, Apr 19 '17 at 02:41

score 0 · Answer 1 · answered Apr 19 '17 at 03:58

I needed to add a wrapper #main that has a min-height set to auto. And replaced the html div min-height:100%; to height:100%;.

html{
  width: 100%;
  height: 100%;
}

body {
   
  background: linear-gradient(45deg, rgb(51, 173, 255), rgb(128, 255, 212))no-repeat;
    margin: 0;
    display: flex;
    flex-direction: column;
  width: 100%;
    height: 100%;

}

footer{
flex-shrink: 0;
height: 200px;
  background-color: #484848;
  opacity: 0.8;
  width:100%;
  color:#fff;
}

#main {
  background: linear-gradient(45deg, rgb(51, 173, 255), rgb(128, 255, 212))no-repeat;
  min-height: auto;
  flex-grow: 1;
    flex-shrink: 0;
    }

application.html.erb

<body style="min-width:1100px;">

  <div id="header" style="min-width:1120px;">

    <% if content_for?(:navbar) %>
      <%= yield(:navbar) %>
        <% else %>
          <%= render 'shared/navbar' %>
            <% end %>

  </div>


  <div id="main">


    <%= render 'shared/message' %>

      <%= yield %>


  </div>


  <footer style="min-width:1120px;">
    <%= render 'shared/footer' %>

  </footer>

</body>

min-height:100% on html `div` messes up footer

1 Answers1