堆棧內存溢出
  簡體   English   中英

如何將此頁腳移動到底部？

[英]How do I move this footer to the bottom?

 原文  2021-03-10 03:43:48  8   4    html/ css/ footer/ headerfooter

問題描述

我正在處理這個頁腳，但我不知道如何將它移到底部，
有人可以幫幫我嗎？
謝謝
我嘗試更改 CSS 等中的top值
到目前為止沒有任何效果

 .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 -->

4 個解決方案

解決方案1
 0  2021-03-10 03:58:38

將子 class 的內容替換為以下樣式即可

.child {
  ... 
   position: fixed;
   width: 100%;
   left: 0;
}

解決方案2
 0  2021-03-10 04:10:06

這是我為獲得結果而修改的代碼。 解決方案正在添加

bottom: 0px;
position: absolute;

完整代碼

    <HTML>
<HEAD>
    <style type="text/css">
        .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;
}

.footer_container{
      bottom: 0px;
    position: absolute;
}
    </style>

    <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 -->
</HEAD>
<BODY>
    <div class="container footer_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>
</BODY>
</HTML>

解決方案3
 0  2021-03-10 04:19:55

你好嘗試添加這個並檢查這個https://css-tricks.com/snippets/css/a-guide-to-flexbox/

body {
    display: flex; /* This defines a flex container */
    flex-direction: column; /* defining the direction flex items are placed in the flex container */
    height: 100%;
}

.content {
    flex: 1 0 auto; /* This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The default is 0 1 auto */
}

footer {
    flex-shrink: 0; /* This defines the ability of a flexible article to shrink if necessary. */
    margin-top: 80px;
}

.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 {
  align-items: stretch;
}

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

html, body {
  height: 100%;
}

<html>
    <head>

    </head>

    <body>
        <div class="content">
            <div class="container">

            </div>
        </div>

        <footer>
            <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>
        </footer>
        <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>
    </body>
</html>

解決方案4
 0 已采納  2021-03-10 06:52:59

如您所見，沒有太多內容可以覆蓋整個視口。 因此，要覆蓋全屏，您必須讓身體高度至少為 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 -->

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何將頁腳推到頁面底部？ 如何將頁腳保持在頁面底部？ 如何將頁腳移到頁面底部？ 我將如何將頁腳移動到可滾動頁面的底部？ 試圖將頁腳移到底部 如何在右下方保留頁腳div？ HTML/CSS 如何讓頁腳卡在底部？ 如何使頁腳位於內容的底部？ 如何將頁腳與Flexbox“卡片”的底部對齊？ 如何修復頁腳和頁面底部？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM