如何將div放置到容器的底部？

我需要將<div id="group-of-tables">設置爲<div class="item-content">和的底部，而不使用絕對位置。如何將div放置到容器的底部？

HTML：

<div class="item-content"> 
    <div id="group-of-tables"> 
     <table class="item" id="first-table"> 
      <tr> 
       <td><div class="" id="">1</div></td> 
       <td><div class="" id="">2</div></td> 
       <td><div class="" id="">3</div></td> 
       <td><div class="" id="">4</div></td> 
      </tr> 
     </table> 
     <table class="item" id="second-table" border="1"> 
      <tr> 
       <td><div class="" id="">Next</div></td> 
      </tr> 
     </table> 
    </div> 
</div>

CSS：

.item-content{ 
    height:100%; 
}

事情是這樣的：

enter image description here

來源

2015-06-27 Ruslan Lomov

我想不出別的辦法做比絕對定位。位置：固定;底部：0;也不方便（我想它是，因爲它堅持瀏覽器窗口）？ –

也許用'vertical-align：bottom;'。看到一個[演示在這裏]（https://jsfiddle.net/lmgonzalves/hyoxv5gj/）。 – lmgonzalves

爲什麼你不想使用'position：absolute'？ – Khalos

您可以用CSS 01做，並且不要忘記在所有與flex相關的規則前加上它以使其運行更多瀏覽器，請訪問this link以查看更多支持細節，請訪問this link以瞭解更多信息。

JsFiddle Demo

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrap { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-end; 
 
} 
 
.top { 
 
    flex: 1; 
 
}

<div class="wrap"> 
 
    <div class="top">Top</div> 
 
    <div class="bottom">Bottom</div> 
 
</div>

來源

2015-06-27 20:05:15 Stickers

基本上我需要附加div與ID組表底部的項目內容 –

@RuslanLomov是的，我試圖讓演示儘可能簡單（並顯示你如果你也有頂部的內容），[這個演示]（http://jsfiddle.net/56y1hhhs/）是你問我想的。 – Stickers

如果項目內容的高度在整頁加載後在腳本中設置，該怎麼辦。它從一開始就不是100％。 –

如何將div放置到容器的底部？

回答

相關問題