Html 粘性页脚容器，不带'；不要与其他内容重叠

我有一个

sidenav

，它有一个包含社交媒体上下文的容器，用于粘贴到

sidenav

的底部，该容器横跨整个视口高度，如下所示：

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

sidenav

直接子容器的

position

属性设置为relative to，然后我可以将

position

属性和值分配给社交媒体容器，以粘贴到底部，如下所示：

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

我的问题是，如果我将社交媒体容器

position

属性设置为

absolute

或

relative

，如果视图端口高度稍微调整，社交媒体容器会与顶部的导航列表重叠，因为它与

sidenav内部

容器相对应

问题

如何将社交媒体容器放置在

侧导航

的底部，而不使用

位置

项目？或者如何使用

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>

项目
项目
项目

//社交媒体内容
//更多社交媒体内容

您可以这样做：（注意边距） 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>

---

您可以通过将.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;
}

---

“如何在不使用position ProeProperty的情况下将社交媒体容器放置在sidenav的底部？”-flexbox。意思是，我可以使用另一个设置为特定高度的容器吗？或者类似的？当然。有这样一个早晨。谢谢你，抱歉

.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;
}