Как получить 100% высоты столбца с помощью CSS?

Question

Я хотел бы получить 100% высоты столбцов с текстом, но кажется, что он никогда не заполняет нижнюю часть div.

HTML:

<div id="conteneur">
<div id="contenu">
<div id="article">

<p>Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt, cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde iactitant possidere, ignorantes profecto maiores suos, per quos ita magnitudo Romana porrigitur, non divitiis eluxisse sed per bella saevissima, nec opibus nec victu nec indumentorum vilitate gregariis militibus discrepantes opposita cuncta superasse virtute.</p>

<p>Eodem tempore Serenianus ex duce, cuius ignavia populatam in Phoenice Celsen ante rettulimus, pulsatae maiestatis imperii reus iure postulatus ac lege, incertum qua potuit suffragatione absolvi, aperte convictus familiarem suum cum pileo, quo caput operiebat, incantato vetitis artibus ad templum misisse fatidicum, quaeritatum expresse an ei firmum portenderetur imperium, ut cupiebat, et cunctum.</p>

<p>Sed tamen haec cum ita tutius observentur, quidam vigore artuum inminuto rogati ad nuptias ubi aurum dextris manibus cavatis offertur, inpigre vel usque Spoletium pergunt. haec nobilium sunt instituta.</p>

</div>
</div>
</div>

CSS:

#conteneur {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

#contenu {
position: relative;
background: transparent;
height: 100%;
top: 0;
left: 0;
}

#article {
height: 100%;
width: 100%;
position: relative;
float: left;
box-sizing: border-box;
-webkit-column-width: 350px;
-webkit-column-gap: 20px;
-moz-column-width: 350px;
-moz-column-gap: 20px;
column-width: 350px;
column-gap: 20px;
}

Вот демо: https://jsfiddle.net/x559dzcs

На самом деле, текст может варьироваться от статьи к другой. В этом примере текст довольно короткий, но он может быть значительно длиннее, и проблема также может появляться иногда.

Есть ли способ избежать этой пустой области внизу div?

Answer 1

Попробуйте это CSS надеюсь, что это решит вашу проблему

 #conteneur {
   /*   remove code     position: absolute;*/
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    #contenu {
        position: relative;
        background: transparent;
        height: 100%;
        top: 0;
        left: 0;
    }

    #article {
        height: 100%;
        width: 100%;
        /* change position:relative to absolute */
        position: absolute;
        float: left;

        /*
          Remove the following code
         box-sizing: border-box;
        -webkit-column-width: 350px;
        -webkit-column-gap: 20px;
        -moz-column-width: 350px;
        -moz-column-gap: 20px;
        column-width: 350px;
        column-gap: 20px;
       */
    }
    /* add new code */

      #article p {

         box-sizing: border-box;
        -webkit-column-width: 350px;
        -webkit-column-gap: 20px;
        -moz-column-width: 350px;
        -moz-column-gap: 20px;
        column-width: 350px;
        column-gap: 20px;
    }