粘性页脚容器不与其他内容重叠

Question

我有一个sidenav，它有一个带有社交媒体上下文的容器，意图坚持sidenav的底部，它跨越整个视口高度，如下所示：

sidenav {
  height: 100%;
  background: #007979;
  left: 0;
  position: fixed;
  text-align:
  width: 25rem;
}

sidenav直接子项是一个容器，其position属性设置为相对于我可以将position属性和值分配给社交媒体容器坚持到底，像这样：

sidenav-inner {
  position: relative;
  height: 100%;
}

我的问题是，如果我将社交媒体容器position属性设置为absolute或relative，如果稍微调整了视口高度，则社交媒体容器会重叠位于顶部的导航列表，因为它与sidenav-inner容器对应。

问题

如何在不使用sidenav proeprty的情况下将社交媒体容器放在position的底部？或者如何使用position属性而不与sidenav中的其他内容重叠？

<nav class="sidenav"> 
    <div class="sidenav-inner"> 
        <div class="sidenav-header"> 
            <div class="row"> 
                <div class="col-md-12"> 
                    <img src="/"> 
                </div> 
            </div>
        </div>
        <ul class="nav"> 
            <li><a>Item</a></li>
            <li><a>Item</a></li>
            <li><a>Item</a></li>
        </ul>
        <div class="side-nav-social"> 
            <div> 
                //social media content
            </div> 
            //more social media content
        </div>
    </div> 
 </nav>

Answer 1

你可以通过将.sidenav-inner定义为flexbox然后让页眉和页脚不增长来轻松解决这个问题，但是ul会逐渐占据所有空间。因此，它将把社交媒体推向最底层。

.sidenav {
  height: 100%;
  background: #007979;
  left: 0;
  position: fixed;
  text-align:
  width: 25rem;
}

.sidenav-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sidenav-header {
  flex: 0 1 auto;
}

.sidenav-inner ul {
    flex: 1 0 auto;
}

.side-nav-social {
  flex: 0 1 auto;
}

https://jsfiddle.net/d2u85u4q/

Answer 2

你可以这样做:(注意边距） 的 HTML

        <nav class="sidenav"> 
    <div class="sidenav-inner"> 
        <div class="sidenav-header"> 
            <div class="row"> 
                <div class="col-md-12"> 
                header
                    <img src="/"> 
                </div> 
            </div>
        </div>
        <ul class="nav sidenav-body"> 
            <li><a>Item</a></li>
            <li><a>Item</a></li>
            <li><a>Item</a></li>
                        <li><a>Item</a></li>
            <li><a>Item</a></li>
            <li><a>Item</a></li>
                        <li><a>Item</a></li>
            <li><a>Item</a></li>
            <li><a>Item</a></li>
        </ul>
        <div class="side-nav-social"> 
            <div> 
                //social media content
            </div> 
            //more social media content
        </div>
    </div> 
 </nav>

css：

    .sidenav {
  height: 250px;
  background: #007979;
  left: 0;
  position: fixed;
  width: 200px;
}

.sidenav-inner {
  position: relative;
  height: 90%;
}
.sidenav-header{
  height:10%;
}
.sidenav-body{
  overflow:auto;
  height:70%;
}
.side-nav-social{
  position:absolute;
  bottom:0;
  height:10%;
}

plnker code