html - 底部侧边栏中的固定 block

Question

我有固定的侧边栏

html

<aside class="fixed-col">
<div class="fix-wrap cf">
    <div class="fixed-col-inner">
        <div class="menu-side">
        <div class="main-menu-wrap">
            <ul class="main-nav">
                <li><a href="#">1</a></li>
                <li><a href="#" class="add-article">2</a></li>
                <li class="my-photos"><a href="#">3</a></li>
                <li class="add-photos"><a href="#">4</a></li>
                <li class="my-works"><a href="#">5</a></li>
                <li class="add-works"><a href="#">6</a></li>
            </ul>
            <a href="#" class="slide-li" onclick="return false"></a>
            <span class="line"></span>
            </div><!-- main-menu-wrap -->
            <ul class="second-nav">
                <li class="open-hidden-nav"><a href="#" onclick="return false">11</a></li>
                <li><a href="#">12</a></li>
                <li><a href="#">13</a></li>
                <li><a href="#">14</a></li>
                <li><a href="#">16</a></li>
            </ul>
        </div><!-- menu-side -->
        <ul class="social">
            <li class="facebook"><a href="#"></a></li>
            <li class="vk"><a href="#"></a></li>
        </ul>
    </div><!-- fixed-col-inner -->
    </div><!-- fix-wrap -->
</aside><!-- fixed-col -->

CSS

html, body {
margin: 0;
height: 100%;
}

.fixed-col {
width: 290px;
height: 100%;
position: fixed;
left: 0;
background: url(../img/menu-bg.jpg) no-repeat;
background-size: 100% 100%;
overflow-y: auto;
overflow-x: hidden; 
transition: all .5s ease;
z-index: 50;
}

.fixed-col-closed {
width: 85px;
height: 100%;
position: fixed;
left: 0;
background: url(../img/menu-bg.jpg) no-repeat;
background-size: cover;
overflow-y: auto;
overflow-x: hidden; 
visibility: hidden;
opacity: 0;
transition: all .5s ease;
}


.fix-wrap {
background: rgba(0, 0, 0, 0.8);
min-height: 100%;
}

.fixed-col-inner {
height: 100%;
position: relative;
}

.main-nav {
margin: 15px 0 0 0;
padding: 0;
list-style-type: none;
max-height: 78px;
overflow: hidden;
transition: max-height 0.5s;
}



.main-nav li {
display: block;
}

.main-nav li:hover {
background: #4d4d4d;
}

.main-nav li a {
font: 14px/39px "Calibri";
color: #f5f5f5;
text-decoration: none;
display: block;
background: url(../img/sprite.png) no-repeat;
background-position: -10px -357.8999938964844px;
padding-left: 30px;
margin-left: 30px;
}

.main-menu-wrap {
padding-top: 25px;
}


.main-menu-wrap span.line {
margin: 12px 30px 0;
background: #51504f;
height: 1px;
display: block;
}

.second-nav {
margin: 0;
padding: 0;
list-style-type: none;
}

.second-nav li {
display: block;
}

.second-nav li:first-child {
margin-top: 11px;
}

.second-nav li:hover {
background: #4d4d4d;
}

.second-nav li a {
font: bold 16px/39px "Calibri";
color: #f5f5f5;
text-decoration: none;
display: block;
padding-left: 30px;
}

.social {
margin: 30px; 
padding: 0;
text-align: center;
height: 20px;
background: red;
list-style-type: none;
}


.fix-wrap {
background: rgba(0, 0, 0, 0.8);
min-height: 100%;
}

.fixed-col-closed-inner {
height: 100%;
position: relative;
}

参见 JsFiddle DEMO

我需要始终在底部的 block .social(红色 block )。我尝试为其设置 position: fixed，但是当我添加内容(更多菜单项)时，它不会将 .social 推送到下方。如何修复底部的 .social ？提供 - 如果您添加更多内容，则内容会将其下推。

更新。我无法从此标记中删除任何 block ，我无法更改除 block .social 之外的 block 的位置。如有必要，我可以添加 html 标记

更新2。对不起，我的英语还很糟糕。我需要像粘性页脚这样的东西，当内容很少时 - 它总是在底部，当内容较多时 - 内容会将它向下推。

Answer 1

使用绝对定位。

http://jsfiddle.net/9d4p3kbj/

.social { 
    padding: 0;
    text-align: center;
    height: 20px;
    background: red;
    list-style-type: none;

    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    margin: 0;
}

还为您的 .second-nav 添加了边距底部，因此它不会重叠。

你会注意到现在它有完整的宽度，如果你需要调整填充(或边距)用另一个 div 包裹它。

http://jsfiddle.net/9d4p3kbj/1/