Question

我试图将我的页脚放在页面底部，我得到了它位于页面底部的部分，但现在它与我的内容区域重叠，称为＆＃34;投资组合列表＆＃34;这就是现在的样子： enter image description here

正如您所看到的，我的页脚与我的投资组合列表的底部重叠。 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页脚底部

4 个答案: