How to get 100% height column with CSS?

Question

I would like to get 100% height columns with text but it appears that it never fills the bottom of the 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;
}

Here is a demo : https://jsfiddle.net/x559dzcs

Actually, the amont of text can vary from an article to another. In this example, the text is quite short but it can be considerably longer and the issue can also appear sometimes.

Is there a way to avoid this blank area at the bottom of the div ?

You can fix the height of the div but again it is not a solution because if the content is large or small than you would have the same issue making height 100% according to the text content is the best solution. You can always control width but height depends upon the page content. — Hamza Dairywala, Aug 27 '16 at 10:40
if I understand correctly, the problem is about the columns property with an horizontal scrolling website... If the amount of text exceed the size of the page, then the issue disappears. — Guillaume, Aug 27 '16 at 10:52
Possible duplicate of [Make div 100% height of browser window](https://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) — Rob, Sep 11 '17 at 14:15

score 0 · Answer 1 · answered Aug 27 '16 at 11:16

Try this css hope it resolves your issue

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

I don't get the point of your answer... I'm working on an horizontal scrolling website. Here is the result with more text : https://jsfiddle.net/x559dzcs/2/ — Guillaume, Aug 27 '16 at 11:55

How to get 100% height column with CSS?

1 Answers1