Как получить столбец высотой 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

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

Есть ли способ избежать этой пустой области в нижней части 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; 
    }