-1

I have the following situation:
In a bootstrap row with 2 columns:
- first column with a table that has a button to add new rows - second column with a label and a span (it does not have to be a span)

The two columns have the same height, but I want the label and the span to fill the column. The label has a fixed height and the span should have the remaining height. I tried using height: 100%, add an intermediate div, but with no success

Can this be achieved?

Edit: Here is what I would like:

<div>
    <label>Descriere</label>
    <span class="editorWidth positionDescription">This text is variable
This control should expand as the div in left
Also it should support scrolling if the text is greater than the allocated space
Extra
Extra
Extra</span>

http://jsbin.com/niyenudufo/edit?html,css,output

The span.positionDescription should fill the rest of the div. I tried to convert the span to div but the scroll of the div is created outside of the containing div

Dan
  • 683
  • 2
  • 8
  • 24

1 Answers1

0

Seeing your actual HTML and CSS it would be alot easier to understand the question however i believe your problem could be resolved with the calc function in CSS:

element {height calc(100% - x);}

x being the height of the logo. calc is pretty self explanatory and allows basic caluclation in CSS. this should take up 100% but not overflow. also ensure you account for padding and margin on both elements.

Peter Maltby
  • 35
  • 6