CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Mortada
Mortada

Reputation: 35

how to make the div's fill in available space automatically

I have this html page:

jsFidlle Demo

I want the boxes to fill in the available space automatically with the boxes having same width but different heights.

Pretty much as the notes in google keep

Upvotes: 0

Views: 109

Answers (3)

Artem Ankudovich
Artem Ankudovich

Reputation: 456

Cant seem to achieve the effect jsfiddle but this is how i would go about it

<div class="which-ever-class-name"> //surrounding the two divs
<div class="components">Help us find a visionary financier!</div>
<div class="components">Kamusi Here:<br>
Instant translation among the languages in our system (arriving soon at 50+)
<ul>
<li>Chrome extension: ready to ship (pending server)
<li>Mobile app: we need a day or three to join Here! and WordUp!
<li>Facebook Messenger: needs some easy hacks
<li>Other platforms: we've got the back end, just need the implementation horsepower
</ul>
</div>
</div>//end surrounding div

and in css

.components{
  height:100%;
 }

What this should do is set the components height to fill parent(which-ever-class-name) height, and parent height in turn will be set by the longest component.

Upvotes: 0

Haresh Vidja
Haresh Vidja

Reputation: 8496

I hope it would be helpful to you.

https://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/

This is compatible with bootstrap.

Upvotes: 1

Arun Ghosh
Arun Ghosh

Reputation: 7754

You cannot have it using CSS. You will have to use something like jQuery Masanory

Upvotes: 0

Related Questions