时间戳

首页 > 解决方案 > 带有滑动垂直导航栏的页脚超出屏幕宽度

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

问题描述

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

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

标签： htmlcssfooter

解决方案

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

  • 尝试将 box-sizing 设置为border-box

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

  • 您可以移动 flex 容器中的所有内容，并且仅使用 flex 设置为 1 的溢出属性（flex：1；flex-flow：column）使内容区域可滚动。

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

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

希望能帮助到你！

推荐阅读