html `div` 上的 min-height:100% 弄乱了页脚答案

【问题标题】：min-height:100% on html `div` messes up footerhtml `div` 上的 min-height:100% 弄乱了页脚
【发布时间】：2017-04-19 11:58:53
【问题描述】：

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

我的身高足够长的页面可以滚动到底部，页脚可以正常工作..
高度为整个页面而不滚动导航栏的页面似乎在其下方有空间。并且看起来它粘在页脚之前的任何 div 下方。

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>

【问题讨论】：

学习格式化您的代码。它使故障排除/维护变得更加容易。
您在某处有您的代码示例吗？你能把编译后的代码贴在我们可以看到它工作的地方吗？

标签： html css footer

【解决方案1】：

我需要添加一个包装器#main，它的最小高度设置为自动。并将html divmin-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>

【讨论】：