使用滑动垂直导航栏的页脚超出屏幕宽度

Question

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

   <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% 高度时，它仍然不在底部。任何帮助将不胜感激。

Answer 1

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

尝试将 box-sizing 设置为 border-box
要使页脚贴在底部，您可以尝试多个选项，例如，固定位置和底部 0 并为上部内容的其余部分添加底部边距，该底部边距应该恰好是等于页脚的最大高度。
您可以移动 flex 容器中的所有内容，并且仅在 flex 设置为 1（flex：1；flex-flow：column）的情况下使内容区域可滚动，溢出属性。
您可以将内容容器的高度设置为 100vh，这样它就会始终展开并使页脚保持在底部。

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

希望对您有所帮助！

使用滑动垂直导航栏的页脚超出屏幕宽度

Footer exceeding width of screen with sliding vertical navbar

html

css

footer