如何在html css中使用页脚答案

【问题标题】：how to use footer in html css如何在html css中使用页脚
【发布时间】：2019-03-07 16:29:46
【问题描述】：

我是 HTML 和 CSS 的新手，所以我尝试使用 w3school 创建我的网站。我使用了带动画的 div，但我遇到了一个问题，即当我想为页脚编写代码时，页脚会返回到我的 Div 或左侧。

我的 div 代码有什么问题？我认为问题出在位置上，但我更改了它们并提出了一个新问题。请帮帮我

<?php
include'connect.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>صفحه اصلی  | زود پروژه</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function function_name() {
myFunction();
    })
function d() {
 var data = "";
        $("p").each(function(){
            data += $(this).text();
        });
        alert(data);
    }

function hide() {
  $('#contact').hide();
}
function myFunction() {
  // Get the snackbar DIV
  var x = document.getElementById("snackbar");

  // Add the "show" class to DIV
  x.className = "show";

  // After 3 seconds, remove the show class from DIV
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

</script>


    <style type="text/css">
@font-face {
font-family: "CustomFont";
src: url("iranian.ttf");

}

.parallax { 
  /* The image used */
  background-image: url("http://www.themesindustry.com/html/xeone/images/arrow-slide1.jpg");
position: relative;
  /* Set a specific height */
  height: 600px; 
text-align: center;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}
.flip-card {
  background-color: transparent;
  width: 300px;
  float: right;

margin: 2px 30px 50px 20px;
  height: 155px;
  border: 3px  #000;

}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;

  height: 100%;
  text-align: center;
  transition: transform 0.4s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);


}


/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front
 {

  background-color: #643094;
  color: #ffffff;
}

/* Style the back side */
.flip-card-back
 {
  background-color:  #00bcd4;
  font-size: 12px;
  color: white;
  transform: rotateY(180deg);
}


#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #840DF0; /* Black background color */
  color: #fff; /* White text color */

  text-align: center; /* Centered text */
  font-size: 22px;
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

.topnav {
  overflow: hidden;
  background-color: #1a789a;
  padding-right: 20px;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: right;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the "active" element to highlight the current page */
.topnav a.active {
  background-color: #ff8989;
  color: white;
}

/* Style the search box inside the navigation bar */
.topnav input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  font-size: 17px;
}
#psen{

    font-size: 14px;
    font-weight: bolder;
}
#pbio{
    font-size: 15px;
font-weight: bold;
padding:1px;
}
.contact{
    font-size: 20px;
}
/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: right;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;

  }
}
.caption {
  position: absolute;
  left: 0;
  top: 40%;

  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #423e3e;
  color: #19d3de;
  padding: 15px;
  font-size: 45px;
  letter-spacing: 7px;
}

.caption2 {
  position: absolute;
  left: 0;
  top: 55%;

  width: 100%;
  text-align: center;
  color: #000;
}

.caption2 span.border2 {
  background-color: #19d3de;
  color: #000;
  padding: 15px;
  border-radius: 30px;
  font-size: 20px;

}

footer {
    position:fixed;
    bottom:0;
}

    </style>
</head>
<body>

<div class="topnav" style="font-weight: bold;">
  <a class="active" href="#home">صفحه اصلی</a>
  <a href="#about">حساب من</a>
  <a href="#contact" id="contact">لیست پروژه ها</a>

</div>
 <div class="parallax">

<div class="bgimg-1">
  <div class="caption">
  <span class="border">زود پروژه</span>

  </div>

</div>
<div class="bgimg-1">
  <div class="caption2">
  <span class="border2">آنلاین پروژه بگیرید یا فریلنسر استخدام کنید</span>

  </div>

</div>
 </div>





 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>






<!-- The actual snackbar -->
<div id="snackbar"><a href="https://t.me/zoodproject" style="text-decoration: none; color: #fff;" target="_blank">به زودپروژه خوش آمدید</a></div>




 <footer>sdsd
    </footer>
</body>

</html>

【问题讨论】：

据我所知，您的页脚位于正确的位置（在其他内容的底部）。您希望它在哪里？
如果你能运行我的代码。当我改变分辨率时，页脚会增加 Div 项目
当您刚接触 HTML 时，我认为直接进入媒体查询和 jQuery 并不是一个好主意。
我从 1500 像素宽的窗口一直到 50 像素，sdsd 为我留在了页面底部
这里没有人会连接到您的 PC 来帮助您；这通常被认为是一项优质服务。 SO 是一个供人们互相帮助解决特定编程问题的社区。如果您不能将代码缩减为 minimal reproducible example，那么对于这里的问答格式可能不够具体。

标签： javascript html css

【解决方案1】：

在您的 HTML 中，您使用的是 <footer> 元素，但在您的 CSS 中，您指的是页脚 ID。

在您的 CSS 中将 #footer 更改为 footer。

【讨论】：

谢谢你，但我不希望我的页脚粘在底部。我想当用户到达页面末尾时，然后可以看到页脚

【解决方案2】：

编辑

我只会关注您的问题，而忽略其他问题，但是您的代码中的语法非常糟糕。请务必再次通读教程。

为了得到你想要的，你必须把 flip-cards 放在一个 div 容器中，像这样：

<div id="container">
  <!-- All your flip-cards in here  -->
</div>

然后在 CSS 中对容器使用 clearfix hack，因为您的卡片使用的是浮点数：

#container::after {
  content: "";
  clear: both;
  display: table;
}

然后也做我在下面写的。

HTML 中的 footer 标记没有您试图在 CSS 中引用的 id。

在页脚中添加 id 或在没有 id 选择器的情况下引用它 (#) 在 CSS 中。

在这种情况下，我将 id 属性添加到页脚标记

<footer id="footer">sdsd</footer>

对于 CSS，将页脚置于页面末尾的中心。只有在用户到达页面末尾时才能看到：

在您的情况下，只需将文本居中，HTML 正常流程就会将页脚保留在末尾，只要它是正文中最后显示的元素。
```
#footer {
   text-align: center;
}
```

另外，欢迎来到 Stack Overflow！

【讨论】：

谢谢你，但我这样做是可行的，当我改变分辨率时，页脚出现在视差之下。
我已经编辑了解决方案来满足您的要求。但是，请再次阅读 HTML、JS 和 CSS 教程。你提供的代码是一团糟。