Question

如何让小页面填满浏览器高度，以便页脚位于底部而不是中间

例如

<body>
  <div data-offcanvas class="off-canvas-wrap">
  <div class="inner-wrap">
      <%= render 'layouts/navigation' %>
    <section class="main-section">
       <%= render 'layouts/messages' %>
       <div class="row">
          <div class="large-12 columns">
            <%= yield %>
          </div>
        </div>
    </section>
    <div class="footer-bottom">
       <div class="row">
       <div class="small-12 columns small-centered text-center">

          <ul class="footer-links">
            <li><a href="#">About</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Privacy Policy</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Sitemap</a></li>
         </ul>
         <p class="copyright">© 2011–2014 Acme, Inc. All rights reserved.</p>
      </div>
    </div>
  </div>

  <a class="exit-off-canvas"></a>

  </div>
</div>

<%= javascript_include_tag "application" %>
<script>$(document).foundation();</script>
  </body>

当产量较小时，页脚会在页面中间结束。我可以将页脚放在底部，我也可以将它放在一堆内容之后，所以滚动就可以了。我搜索过，大多数人想要一个粘性页脚，这不是我想要的。我不总是想要它在底部，我只想让每个页面的高度至少为1页。

我怎样才能做到这一点？

Answer 1

像这样：

<强> CSS

html,
body,
.off-canvas-wrap,
.inner-wrap {
    position: relative;
    min-height: 100%;
}

.inner-wrap {
    padding-bottom: [hight of your footer]px;
}

.footer-bottom {
    position: absolute;
    bottom: 0px;
}

注意：您使用class=""错误。如果您挑剔，则唯一元素应使用id=""： - ）

Answer 2

html，正文应该有高度：100％;

使用min-height：calc（）。你需要知道页脚的高度。

http://jsfiddle.net/michaelburtonray/by10fkm9/

HTML

<div class="top">
  <div data-offcanvas class="off-canvas-wrap">
    <div class="inner-wrap">
      <%= render 'layouts/navigation' %>
      <section class="main-section">
        <%= render 'layouts/messages' %>
        <div class="row">
          <div class="large-12 columns">
            <%= yield %>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

<div class="footer-bottom">
  <div class="row">
    <div class="small-12 columns small-centered text-center">

      <ul class="footer-links">
        <li><a href="#">About</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Sitemap</a></li>
      </ul>

      <p class="copyright">© 2011–2014 Acme, Inc. All rights reserved.</p>

    </div>
  </div>
</div>

CSS

html,
body {
    height: 100%;
}

.top {
    background: red;
    min-height: calc(100% - 156px);
}

.footer-bottom {
    background: green;
    overflow: hidden;
    height: 156px;
}

使小页面填满浏览器高度

2 个答案: