带有滑动垂直导航栏的页脚超出屏幕宽度答案

【问题标题】：Footer exceeding width of screen with sliding vertical navbar带有滑动垂直导航栏的页脚超出屏幕宽度
【发布时间】：2020-06-04 09:20:52
【问题描述】：

所以我有一个垂直滑动导航栏，其余内容以正确的宽度在它旁边流动。虽然，我在页脚方面遇到了很多麻烦。无论页面上有多少内容，我都希望它位于页面底部。

   <footer class="container">
      <div class="row">
         <div class="col-md-3">
            <a href="">link</a>
         </div>
         <div class="col-md-3">
            <a href="">link</a>
         </div>
      </div>
   </footer>

   //css
   html {
    position: relative;
    min-height: 100%;
    padding-bottom: 80px;
   }

   .legal {
    position: absolute;
    bottom: 0px;
    height: 80px;
    width: 100%;
    margin: 0;
   }

因为我希望页脚位于底部，所以我将其设置为绝对，但是因为它从上面的内容继承了它的宽度并从导航栏被推过它，所以它超出了屏幕导航栏的宽度。但是，如果我要在导航栏随着屏幕尺寸的变化而折叠时为其设置左边距，它仍然会与边距保持一致并且不在位置上。无论如何，它是否仍然位于底部而不使其成为绝对？即使当我将上面的内容设置为 100% 高度时，它仍然不在底部。任何帮助将不胜感激。

【问题讨论】：

你能把这个代码发送给codepen或fiddle吗？
你能分享你所期望的截图吗？
你能分享一下codepen吗
您没有提供完整的代码和输出。想不通

标签： html css footer

【解决方案1】：

由于您没有提供有关代码的许多详细信息或问题的任何屏幕截图，我无法真正告诉您如何解决溢出宽度问题，但您可以尝试以下方法：

尝试将 box-sizing 设置为 border-box
您可以移动 flex 容器中的所有内容，并且仅通过将 flex 设置为 1 的溢出属性（flex: 1; flex-flow: column）使内容区域可滚动。
您可以将内容容器的高度设置为 100vh，这样它就可以一直展开，并将页脚保持在底部。

对于宽度溢出问题，请尝试确保文本使用“white-space: nowrap”属性，这样它就不会将页脚项 min-width 设置为文本宽度。或者，尝试将溢出 X / Y 设置为隐藏，以便展开的内容不会显示在容器外。如果您使用的是 flex，请尝试使用 Flex-wrap，这样 Flex 可以自动将组件调整到容器的宽度。

希望对你有帮助！

【讨论】：