浮动到页面底部的可变高度页脚的CSS（不是视口）

I'm working on a React app and trying to create a footer that floats to the bottom of the page (not viewport) if there is not enough content to fill the space. Also, the footer height will vary as the browser hits media breakpoints.

我正在研究一个React应用程序并尝试创建一个页脚浮动到页面底部（而不是视口），如果没有足够的内容来填充空间。此外，页脚高度将随浏览器达到媒体断点而变化。

Here's a high-level overview of the html:

这是html的高级概述：

<div id="root">
  <div data-reactroot id="app">
    <div id="modal">
      ...
    </div>
    <div id="header">
      ...
    </div>
    <div id="container">
      ...
    </div>
    <footer id="footer">
      <nav class="navbar navbar-light navbar-fixed-bottom bg-faded">
        <div class="container">
          <div class="row">
            <div class="col-md-4">
              <a class="nav-link" href="/privacy-policy">Privacy Policy</a>
            </div>
            <div class="col-md-4">
              <a class="nav-link" href="/terms-of-use">Terms of Service</a>
            </div>
            <div class="col-md-4">
              <a class="nav-link" href="/contact-us">Contact Us</a>
            </div>
          </div>
        </div>
      </nav>
    </footer>
  </div>
</div>

Here's the relevant CSS (note current css prevents page overscrolling - I removed my failed attempts to solve this issue):

这是相关的CSS（注意当前的css可以防止页面过度滚动 - 我删除了解决此问题的失败尝试）：

#footer {
  margin-top: 10px;
  text-align: center;
}

html, body {
  margin: 0;
  height: 100%;
}

html {
  overflow: hidden;
}

body {
  overflow: auto;
}

#root, #app {
  height: 100%;
}

Also, please note that I've found a gazillion similar questions about this issue on Stack, but literally none that stipulate a footer with a variable height AND a footer that isn't sticky (i.e. positioned at bottom of viewport).

另外，请注意我在Stack上发现了关于这个问题的大量类似问题，但实际上没有一个规定具有可变高度的页脚和不粘的页脚（即位于视口底部）。

Any help would be greatly appreciated!

任何帮助将不胜感激！

1 个解决方案

#1

So, I'm not 100% sure I understand the question, so going to repeat back my understanding.

所以，我并不是100％肯定我理解这个问题，所以要重复我的理解。

You want the footer to always be below the rest of the content
您希望页脚始终低于其他内容
If the page is less than the size of the viewport, you want the footer to be at the bottom of the viewport
如果页面小于视口的大小，则希望页脚位于视口的底部
If the page is greater than the size of the viewport, the footer should just be directly below the rest of the content.
如果页面大于视口的大小，则页脚应该直接位于其余内容的下方。

Assuming this is the case, I think the simplest way to solve this is to set a min-height on your #app to be at least 100vh and use flexbox to expand the container to fill additional space if it exists.

假设是这种情况，我认为解决此问题的最简单方法是将#app的最小高度设置为至少100vh并使用flexbox扩展容器以填充额外的空间（如果存在）。

Given your current HTML structure, this would look like:

鉴于您当前的HTML结构，这看起来像：

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#container {
  flex-grow: 1;
}

You can see this in action here: https://codepen.io/kball/pen/YxmgBL

你可以在这里看到这个：https：//codepen.io/kball/pen/YxmgBL

If my understanding of your question/desired outcome is incorrect, please let me know and I'll take another pass at it.

如果我对您的问题/期望结果的理解不正确，请告诉我，我会再接过一遍。

1 个解决方案

#1

更多相关文章

随机推荐