时间戳

首页 > 解决方案 > 让页脚贴在屏幕底部

position - 让页脚贴在屏幕底部

问题描述

下面显示的是我用来构建网站的代码。除了页脚之外，一切都按我的意愿工作。我希望将它放置在计算机屏幕和移动屏幕上的屏幕底部（在我不必向下滚动即可看到它的位置）。

如果有人知道如何让页脚在电脑屏幕和移动屏幕上都停留在屏幕底部，如果您能告诉我，我将不胜感激。

<!DOCTYPE html>
<html>
    
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">    
    
<body>

<title>小泉 - Koizumi</title>
    
<div class="image">
    
<img src="photos/Home_Page/Home/Home_Page_Photo.jpg" alt="Home_Page_Photo.jpg" width="90%">
    
</div>

<div class="words">
<p style="text-align: center; font-size: 35px; font-family: sans-serif; overflow: hidden; color: black;"><a href="Website_Home_Page.html" style="text-decoration:none; color: black; text-shadow:1px 1px 0 #FFFFFF,-1px 1px 0 #FFFFFF,1px -1px 0 #FFFFFF,-1px -1px 0 #FFFFFF;"><b>日本語 </b></a> |  <a href="Website_Home_Page_English.html" style="text-decoration:none; color: black; text-shadow:1px 1px 0 #FFFFFF,-1px 1px 0 #FFFFFF,1px -1px 0 #FFFFFF,-1px -1px 0 #FFFFFF;"><b>English</b></a></p>   
</div>
 
<br><br><footer class="site-footer" style="font-size: 12px;">小泉©</footer>    
 
<style>
    
.image{text-align: center;}

    
p {          
  color: white;
  text-decoration:none; color: white; text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
  font-size: 400%;
  margin: 50px;
  position: relative;
  z-index: 3;}
    
@media (max-width: 1130px)and (min-width: 280px) {
 .responsive-image-container{
        display: flex;
        flex-direction: column;
        text-align: center;
      }
    img{width:100%;
        margin-top: 20px;}
    }
    
    
.footer{width: 100%; 
           height: 40px; 
           text-align: center;
           border-top: 1px solid black; 
           position: absolute;
           bottom: 0;
           padding: 10px;}
    
 .page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -40px; 
}

 .page-wrap:after {
  content: "";
  display: block; 
  }

 .site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 20px; 
}

 .site-footer {
  text-align: center;
  border-top: 1px solid black;
  padding: 10px;
}
     
</style>    
    
</body>
</html>

标签： positionfooterstickybottom

解决方案

推荐阅读