html - 试图对齐页脚，但它消失了

Question

我试图在网站的页脚中对齐不同宽度的 div，所以它是这样的:

但是当我尝试这样做时，我看到的只是一片空白。页脚完全消失了。

这是 HTML 代码:

    <div class="footer" >
            <div class="disclamer">
                <h3>Tite</h3>
                <hr>
                <p>Paragraph of text</p>
            </div>
            <div class="footerlogo">
            <img src="images/logo_footer.png" alt="Footer Logo" align="center" />
            </div>
            <div class="footerlinks">
                <h3>Links</h3>
                <hr>
                <div id="parentlink">
                    <div class="link1">
                        <ul>
                            <li><a href="">&#9654 &nbsp Link</a></li>
                            <li><a href="">&#9654 &nbsp Link</a></li>
                        </ul>
                    </div>
                    <div class="link2">
                        <ul>
                            <li><a href="">&#9654 &nbsp Link</a></li>
                            <li><a href="">&#9654 &nbsp Link</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="copyright">
            <p class="copy">&copy; Copyright</p>
            </div>
    </div>

和 CSS

/* Footer */
.footer{
    height:211px;     
    width: 1200px;     
    position:fixed; 
    background-image: url('../images/footer.png');
    background-repeat:no-repeat;
    display: inline-block;
    overflow:hidden;
}
.disclamer{
    display: inline-block;     
    width:29%;     
    height:50px; 
    font-size: 12px !important;
    color: white;
    padding: 40px;
    padding-top: -20px;
}
.disclamer hr{
    width: 250px;
    margin-bottom: 10px;
}
.footerlogo{
    display: inline-block;     
    width:22%;     
    height:250px;
    margin-top: -30px;
}
.footerlinks{
    display: inline-block;  
    margin:0 auto;     
    height:50px;     
    width:32%; 
    color: white;
    padding: 40px;
    font-size: 12px !important;
}
.footerlinks a{
    color: white;
    text-decoration: none;
}
.footerlinks a:hover{
    text-decoration: underline;
}
.footerlinks hr{
    width: 250px;
    margin-bottom: 10px;
}
#parentlink{
    display: inline;
    width: 350px;
}
.link1{
    width: 129px;
}
.link2{
    position: relative;
    display: inline;
    margin-left: 130px;
    padding-right: -30px;
}
.copyright{
    width: 1200px !important;
    font-size: 12px !important;

}

我还注意到，我有一个容器，其中嵌套了另一个包含所有其他 div 的 div。我使用容器来显示背景，但由于某种原因，当涉及到页脚时，背景停止显示。我有它的 repeat-y，它的高度是 2000px。可能是什么问题？

Answer 1

至少，在使用 position:fixed 时，您需要指定固定位置是什么。

例如，强制将其置于窗口底部(fixed 相对于窗口，而不是页面内容):

.footer{
  bottom: 0;
  left: 0;
  height:211px;     
  /* etc. */
}