Question

无论页面高度如何，我都希望将页脚保持在底部。我已经能够这样做，直到我为背景添加linear gradient。我需要在min-height:100%;上添加html div以使用linear gradient background color填充整个页面。但是现在我的页脚下面有一些空白区域，而不是完全位于底部。

我的身高足以滚动到页脚底部工作的页面。
高度为整页而不滚动导航栏的页面似乎在其下面有空格。它看起来像是在页脚之前的任何div下面。

＆＃13;

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;
}

＆＃13;

application.html.erb

＆＃13;

<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>

＆＃13;

Answer 1

您是否可以更改自己的CSS以使用flexbox？这篇文章中接受的答案有一个使用flexbox的粘性页脚的好例子： css calc and min-height can not team up properly

Answer 2

我需要添加一个最小高度设置为auto的包装器#main。并将html div min-height:100%;替换为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`搞砸页脚

2 个答案: