<div 底顯示是一種CSS布局技巧，它可以將一個元素固定在其父元素底部。通過使用特定的CSS屬性和值，我們可以實現在不同布局和設計需求下，始終保持該元素位于頁面底部的位置。以下是幾個代碼案例，分別說明了如何實現這種效果。
案例一：使用絕對定位和負邊距 為了將一個div元素固定在其父元素底部，我們可以使用絕對定位和負邊距的組合。，我們需要將父元素設置為相對定位，然后使用絕對定位將子元素定位到底部。接下來，通過給子元素設置一個負的底部邊距來使其向上移動，直到達到底部的位置。下面是示例代碼：

HTML部分：

<div class="parent">
<div class="child">這是需要固定在底部的內容</div>
</div>

CSS部分：

.parent {
position: relative;
height: 400px; /* 父元素的高度 */
}
<br>
.child {
position: absolute;
bottom: 0;
margin-bottom: -50px; /* 使子元素向上移動50像素 */
height: 50px; /* 子元素的高度 */
}

案例二：使用Flexbox布局 另一種常用的方法是使用Flexbox布局。Flexbox可以輕松實現元素的垂直對齊，并且可以方便地將元素固定在容器的底部。下面是示例代碼：

HTML部分：

<div class="parent">
<div class="child">這是需要固定在底部的內容</div>
</div>

CSS部分：

.parent {
display: flex;
flex-direction: column;
height: 400px; /* 父元素的高度 */
}
<br>
.child {
margin-top: auto;
height: 50px; /* 子元素的高度 */
}

案例三：使用Grid布局 類似于Flexbox，Grid布局也提供了一種簡便的方法來控制元素的對齊和布局。我們可以使用Grid布局將一個元素固定在底部。下面是示例代碼：

HTML部分：

<div class="parent">
<div class="child">這是需要固定在底部的內容</div>
</div>

CSS部分：

.parent {
display: grid;
grid-template-rows: 1fr auto; /* 1fr表示剩余空間，auto表示子元素的高度 */
height: 400px; /* 父元素的高度 */
}
<br>
.child {
align-self: end; /* 將子元素對齊到底部 */
}

綜上所述，通過使用上述CSS布局技巧，我們可以輕松實現div底顯示效果。無論是使用絕對定位和負邊距、Flexbox布局還是Grid布局，都能夠滿足我們在不同場景下的需求。希望以上案例能夠對你理解和應用div底顯示技術有所幫助。