[英]Fill available space with or without flexbox
在我的<main>元素中，我有div，每個div都有一個.dataCard類。 每個.dataCard都具有相同的最小尺寸，但是當我開始向.dataCard添加內容時，我注意到布局.dataCard 。
<main>元素分為兩列，每列包含一個.dataCard 。 我這樣做是因為我需要.dataCard的順序為左列，然后為右列，左列，依此類推。
但是，當我用內容填充.dataCard ，它們會將所有其他卡向下推到它們下面。
我該如何用.dataCard填充可用空間，以使包含它們的<main>元素的高度盡可能小。
現在，在下面的鏈接中，右列中有第二張牌，但是一堆空白，在第二張牌的末尾，左欄中的第三張牌開始了。
無論有無Flexbox，如何使左列向上移動，換句話說，使卡適合可用空間？
我將不勝感激任何幫助！
這是鏈接：https://googledrive.com/host/0BwJVaMrY8QdcVDBweWk2UXlfTVE/KE.html
根據您的問題，我知道您想用沒有任何空格的框填充整個頁面。
如何將元素粘貼到視口頂部並填充視口的可用垂直空間——沒有 JavaScript？
[英]How to stick an element to the top of the viewport and fill the viewport's available vertical space -- without JavaScript?
如何讓 CSS Grid Container 始終填充可用的垂直空間
[英]How to make CSS Grid Container Always Fill Available Vertical Space
jQuery UI選項卡，其中的選項卡及其內容占可用空間的100％
[英]jQuery UI tabs where the tabs and their contents fill 100% of the available space
Flexbox 增長不會使一個元素填充所有空白空間，並且正在制作一些神奇的空白
[英]Flexbox grow is not making one element fill all of the empty space, and some magic whitespace is being made 🤔
Flexbox，其中一個框設置了flexBasis，其他框填充了剩余空間
[英]Flexbox where one box has set flexBasis with and the others fill remaining space
底部div渲染后如何使頂部div填充剩余高度？ （沒有flexbox）
[英]How to get top div to fill remaining height after bottom div rendered? (without flexbox)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
