固定页脚重叠内容?

时间:2016-03-30 01:30:30

标签: html css position

我没有能够让这个侧边栏正确定位,而不会让页脚重叠。

enter image description here

我的页脚绝对位于底部,用于粘性页脚,我知道它在绝对定位时会将其从文档的正常流中移除。

有人有想法吗?

<section class="sidebar col-md-6">
        <!--Popular Posts-->
        <!--TODO: Find a way to incorporate border design with text-->
        <div class="border-header">
            <p class="post-title">POPULAR POSTS</p>
            <ul>
                <li class="posts-border">My Adventure Through New York City</li>
                <li>Hiking The Pacific Crest Trail</li>
                <li>Explore the Breathtaking Antelope Canyon</li>
                <li>Fujifilm X100T Review: Best New Camera in 2016</li>
                <li>iPhone 6s Review: It Got Even Better</li>
            </ul>
        </div>

        <!--Latest Reviews list -->

        <!-- Categories List -->
        <div class="border-header">
            <p class="post-title">CATEGORIES</p>
            <ul>
                <li>Business <span>(4)</span></li>
                <li>Reviews <span>(3)</span></li>
                <li>Science <span>(4)</span></li>
                <li>Technology <span>(4)</span></li>
                <li>Travel <span>(6)</span></li>
            </ul>
        </div>
</section>
//Sidebar

.sidebar {
    width: 500px;
    min-height: 500px;
    position: fixed;
    right: 20px;
    z-index: 1;

}

    ul li {
        list-style: none;
    }


.posts-border {
    border-bottom: 1px solid lightgray;
    width: 90%;
}

  .post-title {
        margin: -10px auto 10px auto; 
        text-align: center;
}

.border-header {
    border: 2px solid lightgray;
    margin-bottom: 25px;
}

.spacer {
    margin: 200px;
}

0 个答案:

没有答案