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

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;
   }

因为我希望页脚位于底部ive处，所以将其设置为绝对值，但是因为其页脚继承了上面内容的宽度，并被从导航栏推过，因此超出了导航栏的宽度。但是，如果在导航栏因屏幕尺寸改变而折叠时为它设置一个左边距，它将仍然留有边距，并且位置不正确。无论如何，还是让它仍然位于底部而不使它成为绝对的？即使当我将以上内容设置为100％高度时，它仍然不在底部。任何帮助，将不胜感激。

Answer 1

由于您没有提供有关代码的任何详细信息或问题的任何屏幕快照，因此我无法真正告诉您如何解决宽度溢出问题，但是您可以尝试以下操作：

• 尝试将框的大小设置为边界框

• 要使页脚固定在底部，您可以尝试多个选项，例如，将位置固定为0，并将底部固定为0，并在其余的上部内容中添加一个底边距，使其完全等于的最大高度。页脚。

• 您可以移动flex容器中的所有内容，并仅在将flex属性设置为1（flex：1； flex-flow：列）的overflow属性下使内容区域可滚动。

• 您可以将内容容器的高度设置为100vh，因此它将始终被扩展并将页脚保持在底部。

对于宽度溢出问题，请尝试确保文本使用“空白：nowrap”属性，以免将页脚项的最小宽度设置为文本宽度。或者，尝试将溢出X / Y设置为隐藏，以使展开的内容不会显示在容器外部。如果您使用的是Flex，请尝试使用Flex-wrap，以便Flex可以自动将组件调整到容器的宽度。

希望有帮助！