Div yüksekliğini @media kuralı ile belirleme, ya da adını bilmediğim bir css kuralı, | HELP, SOS!

Arkadaşlar @media kullanımı ile ilgili bir sorum var. Düşündüğüm şekilde bir kullanım mevcut mu bilmiyorum fakat böyle bir şeye ihtiyacım var nasıl çözerim bilemedim.
Araştırdım bir sonuca da ulaşamadım.
Konu kısaca şu şekilde,
id'si "row0" "row1" "row2" olan div'ler var.

<div id="row0" class="row">....</div>
<div id="row1" class="row">....</div>
<div id="row2" class="row">....</div>
div içeriği dinamik olarak dolduruluyor. Eğer içerisinde bir şey yoksa standart olarak 20px bir yüksekliği var. Ayrıca divleri şuan için silemiyorum. Yerlerinde durmak mecburiyetindeler
Bu 20px yükseklikleri sayfa üstünde oldukları için saçma bir boşluk yaratıyor içleri boş olduğu zaman.
Sayfaya uyguladığımız @media kurallarını div'e uygulayabiliyor muyuz? Ben divler 21px'den küçükse "display:none;" kodu ile gizlemek istiyorum.
Bu kod gibi; (çalışmaz biliyorum fakat, sayfa yüksekliği değilde, 'eğer div 21px'den küçükse gizle' şeklinde bir komut uygulamam gerekli css ile)

@media (max-height:21px){
    #row0,#row1, #row2{display:none;}
   }

Bu tarz bişeyler denedim ama çalışmadı:

#row0[max-width~="21px"] #row0 { display:none;}

Bunu nasıl çözebilirim acaba, akıl, fikir, yöntem, çek, senet bi şekilde yardım ederseniz sevinirim.

Hocam şu şekilde not kullanmayı deneyebilir misiniz. İçeriğine normalde olan bir etiket mesela a etiketi yoksa gizle gibi

#row0 *:not(a){
display:none;
}

javascript ile divin içeriği boş ise class ekleyebilirsin

:empty seçicisi ile istediğinizi yapabilirsiniz. (div içeriği tamamen boş olmalıdır, boşluk vs. olmamalıdır)

div:empty {
display: none;
}

Teşekkürler, kesin çözüme ulaştırmasa da çok güzel işimi gördü hocam.
Sağ olun.

Bu kullanımı da bilmiyordum teşekkür ederim, öğrendiğim çok iyi oldu. İşe yarayacak gibi görünüyor hocam ama sanırım biraz kullanım şeklini değiştirmem gerekli.
Zaman ayırdığınız için sağ olun.

Css ile çözmem gerekli hocam, alakanız için teşekkür ederim.