Question

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

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

codepen链接！ Reflections

html

ServiceLoader

css

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

Answer 1

我假设您并不是在滚动时尝试将页脚固定在窗口底部，而是在滚动浏览所有内容之后将其显示在页面的底部。

选项1

如果您的所有页面都很长，那么更简单的方法就是让页脚自然位于页面流程中：从position: absolute删除.site-footer并删除{{1 }}来自height: 100%。但是，如果有一个页面（或浏览器）的窗口比页面的内容高，则采用此解决方案后，页脚将不会停留在页面底部。

选项2

如果您希望它在内容短时停留在窗口底部，而在内容长时停留在页面底部，则最好进行以下更改：

首先，从html, body和height: 100%中删除padding: 0和html。（请注意，合并html, body和html样式会更好，因为对其他所有问题进行故障排除会很麻烦，因为您的下游样式只会覆盖文件中较高的样式，因为它们位于相同的特异性。）

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

body

由于min-height: 100vh; position: relative; padding-bottom: 60px;是.site-footer的子元素，因此body是需要具有body的元素，这样我们就可以相对于它绝对定位页脚。另外，我们使用position: relative（视口高度为100％），因为100vh可能很奇怪，因为它可能使用内部内容的高度或父容器的高度，因此处理起来更容易与vh。并且在底部添加其他填充是为了使页脚有空间，因为页脚不在页面流程之内。最后，我建议也将100%的背景色设置为＃98979b，这样，如果内容太短，您就不会出现怪异的白色间隙。

Answer 2

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

elif

Answer 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;

}

页脚不在页面底部

3 个答案:

选项1

选项2