搜索
搜索

如何将此页脚移到底部？

MorganInnit 发表于 Dev
5
摩根·英尼特

我有正在处理的页脚，但我只是想不出如何将其移到底部，
有人可以帮我吗？
谢谢，
我尝试过更改topCSS中的值，等等
到目前为止没有任何效果

.footer-dark {
  padding:30px 0;
  color:#f0f9ff;
  background-color:#282d32;
}

.footer-dark h3 {
  margin-top:0;
  margin-bottom:12px;
  font-weight:bold;
  font-size:16px;
}

.footer-dark ul {
  padding:0;
  list-style:none;
  line-height:1.6;
  font-size:14px;
  margin-bottom:0;
}

.footer-dark ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.6;
}

.footer-dark ul a:hover {
  opacity:0.8;
}

@media (max-width:767px) {
  .footer-dark .item:not(.social) {
    text-align:center;
    padding-bottom:20px;
  }
}

.footer-dark .item.text {
  margin-bottom:36px;
}

@media (max-width:767px) {
  .footer-dark .item.text {
    margin-bottom:0;
  }
}

.footer-dark .item.text p {
  opacity:0.6;
  margin-bottom:0;
}

.footer-dark .item.social {
  text-align:center;
}

@media (max-width:991px) {
  .footer-dark .item.social {
    text-align:center;
    margin-top:20px;
  }
}

.footer-dark .item.social > a {
  font-size:20px;
  width:36px;
  height:36px;
  line-height:36px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,0.4);
  margin:0 8px;
  color:#fff;
  opacity:0.75;
}

.footer-dark .item.social > a:hover {
  opacity:0.9;
}

.footer-dark .copyright {
  text-align:center;
  padding-top:160px;
  opacity:0.3;
  font-size:13px;
  margin-bottom:-2;
  position: absolute;
  right: 47%;
  top: 17%;
}

.container {
  ...
  position: relative;
}

.child {
  ... 
  position: absolute;
  top: 20%;
  left: 90%;
  transform: translate(-30%, 0%);
  width: 2809px;
}

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}
<head>
    <meta charset="utf-8"> <!-- dont copy -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- dont copy -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"> <!-- copy -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">  <!-- copy -->
    <link rel="stylesheet" href="assets/css/style.css">  <!-- dont copy -->
</head>

<div class="container">
  <div class="child">
    <div class="footer-dark">
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-md-3 item">
                        <h3>Products</h3>
                        <ul>
                            <li><a href="#">Ɀinexium Exploit</a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>
                  </div>
                    <div class="col-md-6 item text">
                        <h3>Ɀinexium</h3>
                        <p>Welcome to Ɀinexium, your #1 source for free exploits!
We're dedicated to providing you the very best of Roblox Cheats, with an emphasis on Roblox Cheats, Excellent Service, and it's completely free!
Founded in 2020 by Anakoni, Ɀinexium has come a long way from its beginnings. We hope you enjoy our products as much as we enjoy offering them to you. If you have any questions or comments, please don't hesitate to contact us.</p>
                    </div>
                    <div class="col item social"><a href="https://github.com/Zinexium" target="_blank"><i class="icon ion-social-github"></i></a>
                </div>
                <p class="copyright">Ɀinexium, 2020-21<br />Not Copyrighted</p>
            </div>
        </footer>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
  </div>
  </div>



<!-- Credit to https://epicbootstrap.com/snippets/footer-dark -->

莫赫德·萨尔曼（Mohd Salman）

如您所见，没有太多内容可以覆盖整个视口。因此，要覆盖全屏，您必须给机体高度最小为100vh，如下所示：

body {
   min-height: 100vh;
}
body>.container {
position:fixed;
bottom: 0;
left: 0;
width: 100%;
}

请参阅下面的完整代码段。

body{
  min-height: 100vh;
}

body>.container {
position:fixed;
bottom: 0;
left: 0;
width: 100%;
}
.footer-dark {
  padding:30px 0;
  color:#f0f9ff;
  background-color:#282d32;
}

.footer-dark h3 {
  margin-top:0;
  margin-bottom:12px;
  font-weight:bold;
  font-size:16px;
}

.footer-dark ul {
  padding:0;
  list-style:none;
  line-height:1.6;
  font-size:14px;
  margin-bottom:0;
}

.footer-dark ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.6;
}

.footer-dark ul a:hover {
  opacity:0.8;
}

@media (max-width:767px) {
  .footer-dark .item:not(.social) {
    text-align:center;
    padding-bottom:20px;
  }
}

.footer-dark .item.text {
  margin-bottom:36px;
}

@media (max-width:767px) {
  .footer-dark .item.text {
    margin-bottom:0;
  }
}

.footer-dark .item.text p {
  opacity:0.6;
  margin-bottom:0;
}

.footer-dark .item.social {
  text-align:center;
}

@media (max-width:991px) {
  .footer-dark .item.social {
    text-align:center;
    margin-top:20px;
  }
}

.footer-dark .item.social > a {
  font-size:20px;
  width:36px;
  height:36px;
  line-height:36px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,0.4);
  margin:0 8px;
  color:#fff;
  opacity:0.75;
}

.footer-dark .item.social > a:hover {
  opacity:0.9;
}

.footer-dark .copyright {
  text-align:center;
  padding-top:160px;
  opacity:0.3;
  font-size:13px;
  margin-bottom:-2;
  position: absolute;
  right: 47%;
  top: 17%;
}

.container {
  ...
  position: relative;
}

.child {
  ... 
  position: absolute;
  top: 20%;
  left: 90%;
  transform: translate(-30%, 0%);
  width: 2809px;
}

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}
<head>
    <meta charset="utf-8"> <!-- dont copy -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- dont copy -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"> <!-- copy -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">  <!-- copy -->
    <link rel="stylesheet" href="assets/css/style.css">  <!-- dont copy -->
</head>

<div class="container">
  <div class="child">
    <div class="footer-dark">
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-md-3 item">
                        <h3>Products</h3>
                        <ul>
                            <li><a href="#">Ɀinexium Exploit</a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>
                  </div>
                    <div class="col-md-6 item text">
                        <h3>Ɀinexium</h3>
                        <p>Welcome to Ɀinexium, your #1 source for free exploits!
We're dedicated to providing you the very best of Roblox Cheats, with an emphasis on Roblox Cheats, Excellent Service, and its completely free!
Founded in 2020 by Anakoni, Ɀinexium has come a long way from its beginnings. We hope you enjoy our products as much as we enjoy offering them to you. If you have any questions or comments, please don't hesitate to contact us.</p>
                    </div>
                    <div class="col item social"><a href="https://github.com/Zinexium" target="_blank"><i class="icon ion-social-github"></i></a>
                </div>
                <p class="copyright">Ɀinexium, 2020-21<br />Not Copyrighted</p>
            </div>
        </footer>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
  </div>
  </div>



<!-- Credit to https://epicbootstrap.com/snippets/footer-dark -->

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将页脚移到页面底部？

来自分类Dev

试图将页脚移到底部

来自分类Dev

如何将容器中的弹性物品移到底部？

来自分类Dev

如何将此页脚与导航菜单内的底部对齐并具有响应性

来自分类Dev

添加元素时如何将ScrolledComposite的ScrollBar移到底部？

来自分类Dev

如何将页脚ID偏移到固定位置底部

来自分类Dev

如何将此div放置在页面底部

来自分类Dev

将页脚贴到底部

来自分类Dev

如何将页脚放在页面底部？

来自分类Dev

如何将页脚推到页面底部

来自分类Dev

如何将页脚放在页面底部

来自分类Dev

如何将页脚设置在页面底部？

来自分类Dev

滚动条移到底部后如何启用按钮？

来自分类Dev

将NA移到底部

来自分类Dev

将UITabBar移到底部

来自分类Dev

如何使页脚贴到底？

来自分类Dev

如何将此 Apache VHost 迁移到 nginx

来自分类Dev

粘性flexbox页脚未固定到底部

来自分类Dev

如何将此图像放置在页面的底部中心？

来自分类Dev

如何将ListView滚动到底部？

来自分类Dev

如何将ListView滚动到底部？

来自分类Dev

如何将div中的sth对齐到底部？

来自分类Dev

如何将显示div滚动到底部

来自分类Dev

将圆柱的底圆移到底部

来自分类常见问题

如何将页脚保持在屏幕底部

来自分类Dev

如何将页脚设置在底部并随着内容的增加而下推？

来自分类Dev

CSS：如何将页脚附加到页面底部

来自分类Dev

如何定位底部页脚？

来自分类Dev

如何修复底部的页脚？

Related 相关文章

  1. 1

    如何将页脚移到页面底部？

  2. 2

    试图将页脚移到底部

  3. 3

    如何将容器中的弹性物品移到底部？

  4. 4

    如何将此页脚与导航菜单内的底部对齐并具有响应性

  5. 5

    添加元素时如何将ScrolledComposite的ScrollBar移到底部？

  6. 6

    如何将页脚ID偏移到固定位置底部

  7. 7

    如何将此div放置在页面底部

  8. 8

    将页脚贴到底部

  9. 9

    如何将页脚放在页面底部？

  10. 10

    如何将页脚推到页面底部

  11. 11

    如何将页脚放在页面底部

  12. 12

    如何将页脚设置在页面底部？

  13. 13

    滚动条移到底部后如何启用按钮？

  14. 14

    将NA移到底部

  15. 15

    将UITabBar移到底部

  16. 16

    如何使页脚贴到底？

  17. 17

    如何将此 Apache VHost 迁移到 nginx

  18. 18

    粘性flexbox页脚未固定到底部

  19. 19

    如何将此图像放置在页面的底部中心？

  20. 20

    如何将ListView滚动到底部？

  21. 21

    如何将ListView滚动到底部？

  22. 22

    如何将div中的sth对齐到底部？

  23. 23

    如何将显示div滚动到底部

  24. 24

    将圆柱的底圆移到底部

  25. 25

    如何将页脚保持在屏幕底部

  26. 26

    如何将页脚设置在底部并随着内容的增加而下推？

  27. 27

    CSS：如何将页脚附加到页面底部

  28. 28

    如何定位底部页脚？

  29. 29

    如何修复底部的页脚？

热门标签

归档