<div是HTML中常用的一個標簽，用于創建一個容器，可以在這個容器中放置其他HTML元素進行布局。然而，有時候我們會發現，使用<div>標簽創建的容器并沒有完全貼緊底部，而是與底部留有一定的間隙。本文將詳細解釋這個問題的原因，并提供幾個代碼案例來說明如何解決這個問題。
導致<div不在底部的主要原因是HTML文檔的默認布局會導致<body>元素的高度不會自動擴展到整個瀏覽器窗口的底部。這主要是因為瀏覽器為了兼容性的考慮，默認給<body>元素設置了一個默認的外邊距（margin），所以<body>元素實際上并不是緊貼著瀏覽器窗口底部的。
下面是一個簡單的示例，展示了一個包含一個<div>容器的HTML頁面。我們可以看到，頁面中的<div>容器并沒有完全貼緊頁面底部：
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
<br>
.container {
background-color: gray;
height: 100px;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>在上面的示例代碼中，我們在<style>標簽內為<body>元素設置了margin和padding屬性都為0，以確保<body>元素的邊距為0。然后，我們在HTML文件中創建了一個容器<div>，設置了高度為100px，并給它添加了一個灰色的背景。然而，可惜的是，即使我們的容器的高度設置為100px，它依然沒有貼緊底部。
要解決這個問題，我們需要對一些元素應用適當的樣式，以確保頁面布局正確。下面是幾種常見的解決方法：
方法一：使用絕對定位（Absolute Positioning）
body {
margin: 0;
padding: 0;
position: relative;
}
.container {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: gray;
}上面的代碼中，我們給<body>元素添加了position: relative樣式，并為容器<div>添加了position: absolute樣式，并設置了bottom屬性為0。這樣一來，容器<div>就會相對于<body>元素的底部定位。由于<body>元素的高度現在已經能夠自動擴展到整個瀏覽器窗口底部，所以容器<div>也會緊貼底部。
方法二：使用flexbox布局
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
height: 100px;
background-color: gray;
}上面的代碼中，我們給<body>元素添加了display: flex樣式，并設置了flex-direction: column屬性，這將創建一個縱向的flexbox容器。然后，我們為容器<div>設置了一個高度，并為<body>元素設置了min-height屬性為100vh（視窗高度）。這樣一來，<div>容器將會沿著縱向的方向撐滿整個瀏覽器窗口，從而緊貼頁面底部。
綜上所述，導致<div不在底部的問題主要是由于HTML文檔的默認布局導致的。通過應用適當的樣式，比如絕對定位或者flexbox布局，我們可以解決這個問題，確保<div>容器緊貼底部。