我的页脚不在页面底部

【问题标题】：My footer isn't sitting at the bottom of my page我的页脚不在页面底部
【发布时间】：2020-07-02 09:32:41
【问题描述】：

我的网站页脚有问题。我希望它贴在页面底部（在其内容之后） 有人可以帮我吗？

编辑：我可以在第二个屏幕（最大的屏幕）上看到页脚，但在我的笔记本电脑屏幕上我只能看到页脚的 1/4。

codepen 链接！ https://codepen.io/jimdiew/pen/zYrPQdP

html

<body>
<div class="site-container">
    <nav class="header-main">
     <label class="logo"><span style="color: #0199a7">ESTUDIO</span>CUATRO</label>
     <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="proyectos.html">Proyectos</a></li>  
        <li><a href="contacto.html">Contacto</a></li>      
     </ul>       
    </nav>
<main class="site-content">
    <div class="row">
        <div class="column">
            <div class="container">  
                <div class="content">
                    <a href="#" target="_blank">  
                        <div class="content-overlay"></div> 
                            <img class="content-image" src="images/1.jpg">
                                <div class="content-details fadeIn-bottom">
                                    <h1 class="content-title">Proyecto #1</h1>
                                    <p class="content-text">Ver más fotos</p>
                                
                                </div>
                    </a>
                </div>
            </div>  
            <div class="container">  
                <div class="content">
                    <a href="#" target="_blank">  
                        <div class="content-overlay"></div> 
                            <img class="content-image" src="images/4.jpg">
                                <div class="content-details fadeIn-bottom">
                                    <h1 class="content-title">Proyecto #5</h1>
                                    <p class="content-text">Ver más fotos</p>
                                
                                </div>
                    </a>
                </div>
            </div>  
            
         </div> 
         <div class="column">
            <div class="container">  
                <div class="content">
                    <a href="#" target="_blank">  
                        <div class="content-overlay"></div> 
                            <img class="content-image" src="images/2.jpg">
                                <div class="content-details fadeIn-bottom">
                                    <h1 class="content-title">Proyecto #2</h1>
                                    <p class="content-text">Ver más fotos</p>
                                
                                </div>
                    </a>
                </div>
            </div>
            <div class="container">  
                <div class="content">
                    <a href="#" target="_blank">  
                        <div class="content-overlay"></div> 
                            <img class="content-image" src="images/3.jpg">
                                <div class="content-details fadeIn-bottom">
                                    <h1 class="content-title">Proyecto #6</h1>
                                    <p class="content-text">Ver más fotos</p>
                                
                                </div>
                    </a>
                </div>
            </div>
         </div> 
         <div class="column">
            <div class="container">  
                <div class="content">
                    <a href="#" target="_blank">  
                        <div class="content-overlay"></div> 
                            <img class="content-image" src="images/3.jpg">
                                <div class="content-details fadeIn-bottom">
                                    <h1 class="content-title">Proyecto #3</h1>
                                    <p class="content-text">Ver más fotos</p>
                                
                                </div>
                    </a>
                </div>
            </div>
            <div class="container">  
                <div class="content">
                    <a href="#" target="_blank">  
                        <div class="content-overlay"></div> 
                            <img class="content-image" src="images/2.jpg">
                                <div class="content-details fadeIn-bottom">
                                    <h1 class="content-title">Proyecto #7</h1>
                                    <p class="content-text">Ver más fotos</p>
                                
                                </div>
                    </a>
                </div>
            </div>
         </div> 
         <div class="column">
            <div class="container">  
                <div class="content">
                    <a href="#" target="_blank">  
                        <div class="content-overlay"></div> 
                            <img class="content-image" src="images/4.jpg">
                                <div class="content-details fadeIn-bottom">
                                    <h1 class="content-title">Proyecto #4</h1>
                                    <p class="content-text">Ver más fotos</p>
                                
                                </div>
                    </a>
                </div>
            </div>
            <div class="container">  
                <div class="content">
                    <a href="#" target="_blank">  
                        <div class="content-overlay"></div> 
                            <img class="content-image" src="images/1.jpg">
                                <div class="content-details fadeIn-bottom">
                                    <h1 class="content-title">Proyecto #8</h1>
                                    <p class="content-text">Ver más fotos</p>
                                
                                </div>
                    </a>
                </div>
            </div>
         </div> 

    </div>
    
</main> 
<footer class="site-footer">
    <div class="footer-social-icons">
        <ul>
            <li><a href="https://www.facebook.com/ecuatro.arquitectos/" target="blank"><i class="fab fa-facebook-f fa-2x"></i></a></li>
            <li><a href="https://www.instagram.com/ecuatro.arquitectos/" target="blank"><i class="fab fa-instagram fa-2x"></i></a></li>
        </ul>
    </div>
</footer>  
</div>

css

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
html {
    position: relative;
    width: 100%;
    height: 100%;
}

.site-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.site-content{
    flex:1;
}

body{
    font-family: sans-serif;
    margin: 0px;
    padding: 0px;
   }

.header-main{
    background: white;
    height: 100px;
    width: 100%;
}

label.logo{
    color: #98979b;
    font-size: 35px;
    line-height: 80px;
    padding: 0 50px;
    font-weight: bold;
}

.header-main ul{
    float: right;
    margin-right: 20px;
}

.header-main ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

.header-main ul li a {
    color: #aaabad;
    font-size: 17px;
    text-transform: uppercase;
    padding: 9px 15px;
    border: 3px; 
}

.header-main a.active, a:hover {
    background: #6dc4c6;
    transition: .3s;
}

.header-main ul li a:hover {
    color: #ffffff;
}

 /*SLIDER*/

html, body{
    width: 100%;
    height: 100%;
    padding: 0;
}

slider {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #98979b;
    overflow: hidden;
    position: absolute;
}

slider > * {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: #98979b;
    animation: slide 12s infinite;
    overflow: hidden;
}

slide:nth-child(1){
    left: 0%;
    animation-delay: -1s;
    background-image: url(images/image-1.jpg);
    background-size: cover;
    background-position: center;
}

slide:nth-child(2){
    left: 100%;
    animation-delay: 2s;
    background-image: url(images/image-2.jpg);
    background-size: cover;
    background-position: center;
}

slide:nth-child(3){
    left: 100%;
    animation-delay: 5s;
    background-image: url(images/image-3.jpg);
    background-size: cover;
    background-position: center;   
}

slide:nth-child(4){
    left: 100%;
    animation-delay: 8s;
    background-image: url(images/image-1.jpg);
    background-size: cover;
    background-position: center;
}

slide:nth-child(5){
    left: 100%;
    animation-delay: 11s;
    background-image: url(images/image-2.jpg);
    background-size: cover;
    background-position: center;
}

@keyframes slide{
    0% { left: 100%; width: 100%; }
    5% { left: 0%; }
    25% { left: 0%; }
    30% { left: -100%; width: 100%; }
    30.0001% { left: -100%; width:0%; }
    100% { left:100%; width:0%; }
}

.site-footer {
    width: 100%;
    height: auto;
    margin: auto;
    background: #6dc4c6;
    padding: 15px 0px;
    bottom: 0;
    right: 0;
    left: 0;
    margin-bottom: 0px;
    overflow: hidden;
}

.footer-social-icons{
    width: 100%;
    height: auto;
    margin: auto;
}

.footer-social-icons ul {
    margin: 0px;
    padding: 0px;
    text-align: right;    
}

.footer-social-icons ul li {
    display: inline-block;    
    width: 30px;
    height: 30px;
    margin: 0px 10px;
    border-radius: 100%;
    background: white;
}

.footer-social-icons ul li a{
    color: #98979b;
    font-size: 10px;
    padding-right: 6px;
}

.footer-social-icons ul li a i {
    line-height: 30px;

}

.footer-social-icons ul li  a:hover i{
    color: #98979b;
}

.site-content {
    background-color:  #98979b;
    position: relative;

}

.row{
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

.column {
    flex: 25%;
  max-width: 25%;
  padding: 0;
}

.column img {
    margin-top: 0px;
    vertical-align: middle;
    width: 100%;
}

.container {
    margin-top: 0px;
    vertical-align: middle;
    width: 100%;
}

.content {
    position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0;
  overflow: hidden;
}

.content .content-overlay {
    background: rgba(109, 196, 198, 1);
    position: absolute;
    height: 99%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
    opacity: 0.5;
}

.content-image{
    width: 100%;
}

.content-details {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
  
.content:hover .content-details{
    top: 50%;
    left: 50%;
    opacity: 1;
}
  
.content-details h1{
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.15em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
  }
  
  .content-details p{
    color: #fff;
    font-size: 0.8em;
  }
  
  .fadeIn-bottom{
    top: 80%;
  }

/* PARA MOBILE */
@media screen and (max-width: 800px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
    .container{
        width: 33.33333%;
      }
  }

@media (max-width: 640px) {
    label.logo {
       font-size: 40px;  
       text-align: center;
       width: 100%;
       padding:0;
       display: block;
    }
    .container{
        width: 100%;
      }

   ul{
       position: fixed;
       width: 100%;
       height: 30vh;
       background: #6dc4c6;
       top: 80px;
       left: 0;
       text-align: center;
   }
   nav {
       color: white;
   }
   nav ul li {
       display: block;
   }
   nav ul li a {
       font-size: 20px;
       color: white;
   }
   a:hover, a.active{
       background: none;
       color: #0199a7;
   }
   slider{ 
    margin-top: 240px;
    }
    .column {
        flex: 100%;
        max-width: 100%;
      }
}

【问题讨论】：

  • 请将您的相关代码以文本形式在此处发布，最好是可重现的示例。

标签： html css frontend


【解决方案1】：

我假设您并不想在滚动时将页脚贴在窗口底部，而是在滚动完所有内容后让它显示在页面的最底部。

选项 1

如果您的所有页面都很长，那么更简单的方法是让页脚自然地位于页面流中：从.site-footer 中删除position: absolute 并从html, body 中删除height: 100% .但是，如果存在窗口高于页面内容的页面（或浏览器），则使用此解决方案页脚不会粘在页面底部。

选项 2

如果你想让它在内容短时粘在窗口底部，而在内容长时坐在页面底部，最好进行以下更改：

首先，从html 和html, body 中删除height: 100% 和padding: 0。 （请注意，合并您的 html 和 body 样式会更好，因为排除其他任何问题会很烦人，因为您的下游样式只会覆盖文件中较高的样式，因为它们处于同一级别特异性。）

然后，将以下内容添加到body：

min-height: 100vh;
position: relative;
padding-bottom: 60px;

由于.site-footer 是body 的子元素，body 是需要position: relative 的元素，它可以让我们相对于它来绝对定位页脚。此外，我们使用100vh（100% 视口高度），因为 100% 可能会很奇怪，因为它可以使用内部内容的高度或父容器的高度，因此更容易处理 vh。在底部添加额外的填充是为了给页脚留出空间，因为它在页面流之外。最后，我建议将body 的背景颜色也设置为#98979b，这样如果内容太短，您就不会出现奇怪的白色间隙。

【讨论】：

    【解决方案2】：

    我需要查看运行的相关代码才能更具体，但很可能需要这样的代码：

    html,
body {
  height: 100%;
}

    【讨论】：

      【解决方案3】：

      尝试移除底部：0；来自 .site-footer 类

      .site-footer {
width: 100%;
height: auto;
margin: auto;
background: #6dc4c6;
padding: 15px 0px;
**bottom: 0;**
right: 0;
left: 0;
margin-bottom: 0px;
position: absolute;
overflow: hidden;

      }

      【讨论】：

      • 我尝试删除位置和底线，但没有任何变化：/
      猜你喜欢
      • 2012-07-29
      • 2012-10-19
      • 2016-04-19
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode