css 删除页脚下白色

gab6jxml 于 2023-01-03 发布在其他

关注(0)|答案(3)|浏览(153)

我想删除页脚下面的空白区域。
附件是我的HTML和CSS代码页脚。

footer {
          text-align: center;
          font-size: 0.9rem;
          font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
          margin-top: auto;
        }

<footer class="footer py-4">
              <div class="container">
                  <div class="row align-items-center">
                      <div class="col-lg-4 text-lg-start">Copyright &copy; myWebsite</div>
                      <div class="col-lg-4 my-3 my-lg-0">
                  </div>
              </div>
          </footer>

css

来源：https://stackoverflow.com/questions/74967265/removing-white-space-below-footer

3条答案

按热度按时间

wwwo4jvm1#

你可以试试这个

footer {
          text-align: center;
          font-size: 0.9rem;
          font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
          margin: auto;
          position: absolute;
          width: 100%;
          bottom: 0;
        }

<footer class="footer py-4">
              <div class="container">
                  <div class="row align-items-center">
                      <div class="col-lg-4 text-lg-start">Copyright &copy; myWebsite</div>
                      <div class="col-lg-4 my-3 my-lg-0">
                  </div>
              </div>
          </footer>

赞(0）回复(0）举报 2023-01-03

ergxz8rk2#

有很多方法可以实现最底部的页脚@chyke007展示了一个解决方案，使用绝对定位从相关元素的底部开始元素。这是一个很常见的实现粘滞底部的方法，但你必须注意相关的祖先和兄弟元素的定位。此外，如果你想使用绝对位置，那么它可能是明智的添加填充底部的主要内容，这至少是最小设置高度的页脚。这样你的内容就不会在页脚下面运行，你也需要知道你的位置zindex，因为其他元素可能会在上面或下面运行。对于任何定位的元素，最好有一个索引区，用于你希望定位的元素存在的地方，如1 - 1999，2000 - 3999，或者你希望如何为你项目定义这些区域，这是为了尝试和限制元素重叠。
另一个解决方案是使用布局，如flexbox列

html, body {
  margin: 0
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column
}

header {
  background: #333;
  flex: 0 0 60px
}

h1 {
  color: #eee;
  padding-left:15px;
  font: bold 1.2rem/60px "Montserrat"
}

main {
  flex: 1 1 auto;
  min-height: 500px
}

footer {
  background: #ccc;
  flex: 0 0 100px;
  text-align: center;
  font-size: 0.9rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

<body>
  <header>
    <h1>Stack Example</h1>
  </header>
  
  <main></main>
  
  <footer class="footer py-4">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-4 text-lg-start">Copyright &copy; myWebsite</div>
        <div class="col-lg-4 my-3 my-lg-0"></div>
      </div>
    </div>
  </footer>
</body>

另外，如果你要设计元素的样式，尽量不要添加死样式，因为你的页脚有文本居中和自动边距，所以不需要边距。但我猜你是想用边距来居中元素，但没有定义宽度或最大宽度，自动边距什么也不会做。这些都是需要注意的事情，加上这消除了任何项目中所有不必要的膨胀。

我希望这是有帮助的!

赞(0）回复(0）举报 2023-01-03

wn9m85ua3#

你可以试试这个。

footer {
          min-height: 100vh;
          display: flex;
          justify-content: center;
          align-items: flex-end;
    
          font-size: 0.9rem;
          font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
          margin-top: auto;
        }

<footer class="footer">    
               <div class="container">
               <div class="row align-items-center">
               <div class="col-lg-4 text-lg-start">Copyright &copy; myWebsite</div>
               <div class="col-lg-4 my-3 my-lg-0"></div>
  </div>
</div>

                  
          </footer>

我希望这对你有帮助

赞(0）回复(0）举报 2023-01-03

我来回答

css 删除页脚下白色

3条答案

相关问题

热门标签

最新问答