Html 在水平和垂直方向将内容固定在中心时出现问题

我在垂直和水平方向上固定中心内容时遇到问题。当我在开发工具中检查时，我的容器流体不会覆盖页脚。我已经看过其他的书堆了，但还是弄不清楚。这是我的密码笔

我想要的是删除侧边栏，因为它是一个只有很少内容的页面。我已经包括了我的问题的截图。 而我的容器液体并没有占据整个页面。 最后，我想知道是否有办法把我的人力资源线缩短这么多

这是我到目前为止所做的代码

HTML

---

您添加了

高度：100%到你的主要部分，这将使它与屏幕一样大，但标题向下推你的主要部分，这就是为什么出现滚动条

然后我添加了
位置：绝对添加到页脚，使其粘到底部，并添加
显示：flex浮点：左和浮点：右

另外，要缩短我用
替换的
行，如果您想进一步缩短，请使用
或更低的值


body，
html{
身高：100%；
背景：#333A4D；
}
navbar先生{
利润率：10px；
背景：#333A4D；
填充：20px；
边际上限：0px；
}
.导航链路{
字体大小：25px；
线高：32px；
颜色：#F3B0B6；
}
.导航项目{
左边距：1 em；
}
.列出内联项{
左边距：1 em；
}
琼伯伦先生{
背景：无；
}
.文本边框{
显示：块；
高度：1px；
边界：0；
边框顶部：4px实心#F3B0B6；
}
.铅{
文本转换：大写；
颜色：#F3B0B6；
字体大小：25px；
线高：31px；
}
@介质（最小宽度：48em）{
.navbar品牌{
浮动：左；
}
.导航{
浮动：对；
}
}
.页脚{
宽度：100%；
位置：绝对位置；
底部：0；
左：0；
填充：0 40px；
显示器：flex；
证明内容：之间的空间；
}
.以内容为中心{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
}






珀斯说他已经开始关注它了

保持警惕，了解最新情况

2018©帕隆戈





不要在jumbotron
行上使用高度：100%。行
，将其设置为容器流体flexbox列（
d-flex flex列
），然后在jumbotron
行
上使用flex-grow-1
，以填充导航和页脚之间的剩余高度。这将消除滚动条

   <div class="container-fluid h-100 d-flex flex-column">
      <nav class="navbar navbar-light fixed-top">
        ..
      </nav>
      <div class="row align-items-center flex-grow-1">
          <div class="col-6 mx-auto">
              <div class="jumbotron text-center mb-0">
                  <hr class="text-border" />
                  <p class="lead">Perth says tuned on it.</p>
                  <p class="lead">Stay Alert For Updates</p>
                  <hr class="text-border" />
              </div>
          </div>
      </div>
      <footer class="mt-auto">
        ..
      </footer>
    </div>


..

珀斯说他已经开始关注它了

保持警惕，了解最新情况

..


至于页面上的jumbotron居中，使导航栏
固定在顶部
，这样它就不会向下推jumbotron内容并使其偏离中心。同时移除jumbotron（mb-0）上的底部边距。这是一个


相关的：

弹性填充高度导航行页脚jumbotron
请将此问题缩小为一个问题。有一个滚动条，因为您有一个100%高度的行，行外有导航和页脚。该行占据了视口的100%高度，因此也需要为导航和页脚留出空间。但我确实在容器流体中有页脚。那么，当我将页脚悬停在inspection tool中时，为什么容器流体没有覆盖页脚。因为它的滚动比视口低，因为jumbotron行也是100%视口高度。谢谢，但内容仍然不在页面的中心。我希望它正好在中间。你能引导我使它垂直于中心吗。下面是它在我的浏览器中的外观：非常感谢您的帮助。！谢谢你的帮助。！
   body,html {
      height: 100%;
      background:#333A4D;
   }
   .navbar{
      margin: 10px;
      background: #333A4D;
      padding: 20px;
    }
   .nav-link{
      font-size: 25px;
      line-height: 32px;
      color: #F3B0B6;
   }
  .list-inline-item{ margin-left: 1rem; }
  .jumbotron{ background: none; }
  .text-border{
     display: block;
     height: 1px;
     border: 0;
     border-top: 4px solid #F3B0B6;
    }
   .lead{
     text-transform: uppercase;
     color: #F3B0B6;
     font-size: 25px;
     line-height: 31px;
    }
    @media (min-width: 48em) {
     .navbar-brand{
       float: left;
     }
   .nav{
     float: right;
    }
  }

   <div class="container-fluid h-100 d-flex flex-column">
      <nav class="navbar navbar-light fixed-top">
        ..
      </nav>
      <div class="row align-items-center flex-grow-1">
          <div class="col-6 mx-auto">
              <div class="jumbotron text-center mb-0">
                  <hr class="text-border" />
                  <p class="lead">Perth says tuned on it.</p>
                  <p class="lead">Stay Alert For Updates</p>
                  <hr class="text-border" />
              </div>
          </div>
      </div>
      <footer class="mt-auto">
        ..
      </footer>
    </div>