如何将指定div元素固定到页面底部？

相关代码 #

HTML代码 #

<div class="container-fluid">
  <div class="row customRows">
    <div class="col col-md-3">
        <div class="d-flex mb-4">
            <img src="{% static '/img/cat.png' %}" alt="Logo" class="img-fluid w-25 align-self-center">
            <h1 class="heading-4 align-self-center">Que vamos a estudiar hoy?</h1>
        </div>
        <ul class="m-0 p-0">
            <a href="#" class="text-decoration-none">
                <p class="parrafo menuItem rounded-2 p-2">
                    Inicio
                </p>
            </a>
            <a href="#" class="text-decoration-none">
                <p class="parrafo menuItem rounded-2 p-2">
                    Chat
                </p>
            </a>
            <a href="#" class="text-decoration-none">
                <p class="parrafo menuItem rounded-2 p-2">
                    Ingresa a tu clase
                </p>
            </a>
            <a href="#" class="text-decoration-none">
                <p class="parrafo menuItem rounded-2 p-2">
                    Buscar clases
                </p>
            </a>
            <a href="#" class="text-decoration-none">
                <p class="parrafo menuItem rounded-2 p-2">
                    Calendario
                </p>
            </a>
        </ul>
        <div class="text-center">
            <img src="{% static '/img/laying.png' %}" alt="" class="w-75">
        </div>
        <div class="profileContainer row p-2 mt-auto">
            <div class="col-2">
                <img src="{% static '/img/girl3.png' %}" class="w-100">
            </div>
            <div class="col-10 my-auto">
                <a href="#" class="text-decoration-none">
                    <p class="parrafo menuItem rounded-2 p-2 m-0">
                        Nombre Usuario
                    </p>
                </a>
            </div>
        </div>
    </div>
    <div class="col col-md-9"></div>
  </div>
</div>

自定义CSS代码 #

.menuItem {  
  transition: background-color 0.3s ease;  
  border-bottom: 1px solid var(--grisClaro2); 
} 
.menuItem:hover {  
  background-color: var(--grisClaro2)!important; 
} 
.profileContainer { border-top: 1px solid var(--grisClaro2);} 
.customRows { height: 100vh;}

已尝试的方法 #

• Bootstrap的mt-auto类
• Bootstrap的mb-auto类（用于测试ul是否能将容器推至底部）
• CSS中的margin-bottom:auto属性
• d-flex与flex-column结合flex-grow（该方法有一定效果，但改变了内容的布局）

解决方案 #

要让.profileContainer定位到侧边栏底部，只需对左侧列做两处调整：

1. 给左侧的col col-md-3添加d-flex flex-column h-100类，让它成为垂直方向的flex容器，并且高度占满父行的100vh空间。
2. 保留.profileContainer上的mt-auto类，在flex垂直容器中，这个类会自动将元素推到剩余空间的底部。

修改后的左侧列代码如下：

<div class="col col-md-3 d-flex flex-column h-100">
  <!-- 原有内容保持不变 -->
</div>

原理说明 #

• 父行.customRows已经设置了height:100vh，确保整个行占满视口高度。
• 左侧列添加h-100后，高度会继承父行的100vh，成为一个满高的容器。
• d-flex flex-column让列内元素垂直排列，此时mt-auto会给.profileContainer添加自动上边距，把它推到容器底部，同时不影响其他元素的原有布局。

内容的提问来源于stack exchange，提问作者Nicolás Ortega Muñoz