CSS：在div容器的底部放置一個div容器

Question

我的意圖是在div容器中放置一個div容器，但它不能正常工作。 我應該放在底部的div容器粘在整個頁面的底部。

 .info-container { display: flex; margin: 0 0 0 auto; max-width: 450px; max-height: 400px; width: 100%; height: 100%; box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.36); background-color: yellow; } div.info-header { position: relative; display: flex; flex-direction: column; width: 470px; background: url('../img/infoheader.png') no-repeat; background-position: auto auto; height: 100px; box-sizing: border-box; } div.info-header h3 { font-family: 'SignPanter', sans-serif !important; text-decoration: none; font-size: 32px; color: white; font-weight: 200; text-shadow: 1px 1px #747474; text-align: center; } div.info-bottom-text:hover { color: white; text-shadow: 1px 1px #747474; } .info-bottom { display: flex; align-items: flex-end; position: absolute; bottom: 0px; } 

 <div class="info-container"> <div class="info-header"> <div class="info-header-text"> <h3>Los Santos International Airport</h3> </div> </div> <div class="info-bottom"> ss <div class="info-bottom-text"> sss </div> </div> </div> 

在div的頁眉和頁腳之間應該是尚未實現的內容div。

如果有人可以幫我解決我的問題會很好！ 提前致謝。

Answer 1

設置為外部div set stlye as

position: relative;

對於內部div設置樣式為

  position: absolute;
    bottom: 0;

Answer 2

訣竅是將所有內容包裝在一個相對定位的元素中，該元素是外部.info-container的直接子元素。

這可以在下面看到，其中我用簡單的規則position: relative創建了類info-wrapper position: relative 。

 .info-container { display: flex; margin: 0 0 0 auto; max-width: 450px; max-height: 400px; width: 100%; height: 100%; box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.36); background-color: yellow; } div.info-header { position: relative; display: flex; flex-direction: column; width: 470px; background: url('../img/infoheader.png') no-repeat; background-position: auto auto; height: 100px; box-sizing: border-box; } div.info-header h3 { font-family: 'SignPanter', sans-serif !important; text-decoration: none; font-size: 32px; color: white; font-weight: 200; text-shadow: 1px 1px #747474; text-align: center; } div.info-bottom-text:hover { color: white; text-shadow: 1px 1px #747474; } .info-bottom { display: flex; align-items: flex-end; position: absolute; bottom: 0px; } .info-wrapper { position: relative; } 

 <div class="info-container"> <div class="info-wrapper"> <div class="info-header"> <div class="info-header-text"> <h3>Los Santos International Airport</h3> </div> </div> <div class="info-bottom"> ss <div class="info-bottom-text"> sss </div> </div> </div> </div> 

Answer 3

info-container應該有position: relative

.info-container {
  position: relative;
  display: flex;
  margin: 0 0 0 auto;
  max-width: 450px;
  max-height: 400px;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.36);
  background-color: yellow;
}

div.info-header {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 470px;
  background: url('../img/infoheader.png') no-repeat;
  background-position: auto auto;
  height: 100px;
  box-sizing: border-box;
}

div.info-header h3 {
  font-family: 'SignPanter', sans-serif !important;
  text-decoration: none;
  font-size: 32px;
  color: white;
  font-weight: 200;
  text-shadow: 1px 1px #747474;
  text-align: center;
}

div.info-bottom-text:hover {
  color: white;
  text-shadow: 1px 1px #747474;
}

.info-bottom {
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: 0px;
}