【问题标题】:Body does not extend to very end of the page?正文没有延伸到页面的最后?
【发布时间】:2017-06-02 01:00:08
【问题描述】:

我的网站中有一个页脚,我想在此页脚中对齐页面右下角的一些文本。

页脚如下所示:

  <div class="container-fluid">
      <div class="row copyright-container col-md-10 col-md-offset-1">
        <div class="copyright">
          <p>&copy; Some Copyright Stuff 2011 - 2020</p>
        </div>
    </div>

我的 SCSS 看起来像这样

.copyright {
      bottom: 0;
      right:0;
    }

我只想在右下角对齐东西。确实是这样,但我的身体似乎没有延伸到页面的最后,但我不知道为什么。

我试图让我的身体高度达到 100%,但这也没有帮助 (&lt;body style="height:100%;"&gt;)。我为我的html尝试了同样的方法。

我的 sn-p 看起来像这样。如您所见,一切正常,但在我的计算机上,正文仅在页面的 2/3 处结束。为什么会这样?

.copyright {
      position: absolute;
      bottom: 0;
      right:0;
 }
 
 .bg {
 background-color: black;
 }
 
 
<html>
<body>

<div class="container-fluid">
    <div class="row copyright-container col-md-10 col-md-offset-1">
      <div class="copyright">
        <p> Some Copyright 2011 - 2020</p>
      </div>
  </div>
  </div>

</body>
</html>

【问题讨论】:

  • 寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
  • 我刚刚尝试过,它似乎在这里工作。问题似乎是我的正文没有延伸到整页,所以它的高度在某个点停止,这也是我的文本没有完全向下移动的原因。我能做什么?我也不确定如何在这里复制。

标签: html css twitter-bootstrap sass


【解决方案1】:

如果你使用 col-md-* 那么你应该添加 col-sm-* 和 col-xs-*,所以如果你的屏幕很小,就会应用合适的 css。这可能是您的代码不起作用的原因之一。

 <div class="copyright col-xs-2 col-xs-offset-10 col-sm-2 col-sm-offset-10 col-md-2 col-md-offset-10">
      <p>Some Copyright Stuff 2011 - 2020</p>
    </div>

或者您可以使用纯 css 来执行此操作,因为我在下面添加了代码,但使用 css 而不是 scss,因为浏览器不理解 scss(Nested code in scss/sass)。

.copyright {
      position: absolute;
      bottom: 0;
      right:0;
 }
<div class="copyright">
   <p>Some Copyright Stuff 2011 - 2020</p>
</div>

【讨论】:

    猜你喜欢
    • 2014-11-30
    • 2013-06-08
    • 2019-06-10
    • 1970-01-01
    • 1970-01-01
    • 2015-10-21
    • 1970-01-01
    • 2018-12-04
    • 2011-01-10
    相关资源
    最近更新 更多