HTML 所有内容底部的页脚

Question

我试图让我的页脚位于我的页面底部，我得到了它位于我页面底部的部分，但现在它与我的内容区域重叠，称为"portfolio list"这就是它的样子像现在：

如您所见，我的页脚与投资组合列表的底部重叠。 CSS 部分：

.container { 
    position: relative; 
    width: 1000px; 
    margin: 0 auto; 
    -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;  
}
#portfoliolist .portfolio {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    width:31%;
    margin:1%;
    display:none;
    float:left;
    overflow:hidden;
}

    .portfolio-wrapper {
        overflow:hidden;
        position: relative !important;
        background: #666;
        cursor:pointer;

    }

    .portfolio img {
        max-width:100%;
        position: relative;
    }

    .portfolio .label {
        position: absolute;
        width: 100%;
        height:40px;
        bottom:-40px;
    }

        .portfolio .label-bg {
            background: #121212;
            width: 100%;
            height:100%;
            position: absolute;
            top:0;
            left:0;
        }

        .portfolio .label-text {
            color:#fff;
            position: relative;
            z-index:500;
            padding:5px 8px;
        }

            .portfolio .text-category {
                display:block;
                font-size:9px;
            }


footer{
    position:absolute;

    bottom:0;
    width:100%;
    height:100px;   /* Height of the footer */
    background:#121212;

}

HTML:

<div id="portfoliolist">  
            <?php
                while($query->fetch()): 


                echo "<a href='post.php?id=$post_id'>"?>
            <div class="portfolio <?php echo $category?>" data-cat="<?php echo $category?>">
                <div class="portfolio-wrapper">          
                    <?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $image ).'" />';?>
                        <div class="label">
                            <div class="label-text">
                                <a class="text-title"><?php echo $title?></a>
                                    <span class="text-category"><?php echo $category?></span>
                            </div>
                                <div class="label-bg"></div>
                        </div>
                </div>
            </div>
            <?php   echo "</a>";
                    endwhile;?>
            </div>

            <footer>
                <div class="footer-nav">
                <ul>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">DeviantArt</a></li>
                    <li><a href="#">Behance</a></li>
                    <li><a href="#">LinkedIn</a></li>
                </ul>
                </div>
            </footer>

这两个 div 都在我的容器中。我希望有人能帮助我！

Answer 1

尝试使用页脚 { position: relative; } 就像 Matej Đaković 说的。但同样重要的是，#portfoliolist 清除.portfolio 的浮动，否则#portfoliolist 没有高度。

#portfoliolist:after {
    content: ' ';
    display: block;
    clear: both;
}

Answer 2

您应该设置页脚的位置：position: fixed;并为没有页脚的页面其余部分设置 z-index: 9999;。这样，页脚始终位于底部，页面的其余部分位于其上方。也许您应该将投资组合的边距底部设置为页脚的高度。我认为应该这样做

同时为页面的其余部分设置 position: relative;。这是我制作的快速代码笔 http://codepen.io/oroborus357/pen/qdXdBw

Answer 3

尝试使用：

footer{
    position:absolute;
    bottom:0;
    right: 0;
    left:0; 
    height: 125px;
    background:#121212;
}

如果不只是添加到您的内容（投资组合列表）并将底部设置为页脚的开头，那么它将是 bottom: 125px; 或 bottom: 126px;

{ position:absolute;
        bottom:125px;
        right: 0;
        left:0; 
}

Answer 4

对于此类问题，这里有一个非常方便的 article。

希望对您有所帮助！

HTML 所有内容底部的页脚

HTML Footer on Bottom under all content

html

css

footer

overlapping