CODEWITHSUNDEEP
htmlcssbulma
Foobar
Foobar

Reputation: 8477

Make column fill vertical space in Bulma?

I have the following simple layout (with the exception that the textarea becomes a Code Mirror at runtime):

<div class="columns">
    <div class="column is-paddingless" style="background: indigo;">
            <textarea id="code-editor"></textarea>
    </div>
    <div class="column">
    </div>
</div>

The problem is - the first column does not fill the vertical space of the page (below the tabs) - rather it just wraps the height of the textarea. For instance:

Screenshot

Is there a way to make the column fill the page?

Upvotes: 7

Views: 19440

Answers (2)

Mahad Ali
Mahad Ali

Reputation: 77

Give a class or id or just write inline style and do

 min-height : XXvh;

Where xx is how VH you need.

According to MOzila devaloper vh Equal to 1% of the height of the viewport's initial containing block.

Upvotes: 0

shaunmwa
shaunmwa

Reputation: 136

Flexbox should work for you! For your reference I love this guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Setting up your .columns like this should do the trick:

.columns {
    display: flex;
    flex-direction: row; // this is default
    align-items: stretch; // this will stretch the children vertically
}

Unsure how you have .column styled (ie height: 100%) but let me know if this does NOT work and I can troubleshoot further.

Upvotes: 4

Related Questions