CSSで100％高さの列を取得するには？

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：https://jsfiddle.net/x559dzcs

実際には、テキストのアモンは別の記事から変えることができ：ここでは

#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; 
} 

はデモです。この例では、テキストは非常に短いですが、かなり長くなる可能性があり、問題は時々表示されることもあります。

divの下部にあるこの空白部分を避ける方法はありますか？

Answer 1

あなたはdiv要素の高さを修正することができ、それはあなたの問題

#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; 
    }