Html 如何使用CSS获得100%高度的列？

我希望得到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>

下面是一个演示：

事实上，文本的数量可能因文章而异。在本例中，文本很短，但可能相当长，有时也会出现问题

---

有没有办法避免div底部的空白区域？

试试这个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;
    }

---

您可以固定div的高度，但这也不是一个解决方案，因为如果内容太大或太小，您会遇到相同的问题，根据文本内容设置100%的高度是最好的解决方案。您始终可以控制宽度，但高度取决于页面内容。如果我理解正确，问题在于水平滚动网站的columns属性。。。如果文本的数量超过了页面的大小，那么问题就消失了。可能的重复我不明白你回答的重点。。。我在一个水平滚动的网站上工作。以下是包含更多文本的结果：

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