CSS -
height

Question

EDITED:

I have the following HTML code:

<div class="div-table">
    <div class="div-table-row">
        <div class="div-table-first-col">
            <div>11:00</div>
        </div>
        <div class="div-table-col">
            <div style="height: 11"></div>
            <div class="appuntamentoContainer">
                <div class="appuntamento" style="height: 25px">11:12 - 12:35</div> //--> need to stretch to bottom
            </div>
        </div>
        <div class="div-table-col">
            <div style="height: 0"></div>
            <div class="appuntamento">11:00 - 11:45</div>
            <div class="appuntamento">11:00 - 12:00</div>
            <div class="appuntamento">11:45 - 12:30</div>
        </div>
        <div class="div-table-col">
            <div style="height: "></div>
        </div>
        <div class="div-table-col">
            <div style="height: "></div>
        </div>
    </div>
</div>

and CSS:

.div-table div.appuntamento {
    background-color: #f3f2de;
    padding: 3px 5px;
    border: 1px solid #d7dde6;
    border-radius: 5px;
}
.div-table {
    display:table;         
    width:auto;         
}
.div-table-row{
    display:table-row;
    width:auto;
    clear:both;
    height: 45px;
}
.div-table-col {
    float:left;/*fix for  buggy browsers*/
    display:table-column;         
    width:154px;
}
.div-table-row .div-table-col{
    border-left: 1px solid #d7dde6;
    border-right: 1px solid #d7dde6;
    border-top: 1px solid #d7dde6;
    min-height: 44px;         
}
.div-table-first-col {
    float:left;/*fix for  buggy browsers*/
    display:table-column; 
    text-align: right;
    width: 45px;
}
.div-table-first-col div{
    padding: 3px 5px;
}

Here the fiddler

Notice the vertical borders. On the left side how it actually is, on the right side how it should. How do i stretch the div to the bottom?

You should take a loot at http://stackoverflow.com/questions/1110915/is-a-div-inside-a-td-a-bad-idea — Mohammad Kermani, Oct 08 '16 at 10:15
That's a spacer, an inner cell. The outer cells have to be dynamic. — Emaborsa, Oct 08 '16 at 12:32

score 1 · Answer 1 · edited May 23 '17 at 12:08

1

add height: 100% on parents table and td.

table {
  height: 100%;
}
td {
  height: 100%;
}

for reference look here: Make div stretch to fit td height

edited May 23 '17 at 12:08

Community

1
1

answered Oct 08 '16 at 10:49

Vishwa Ratna

5,567
5
33
55

...not really. I don't want to stretch it to 100%, but to the bottom of the td. – Emaborsa Oct 08 '16 at 11:22

score 1 · Accepted Answer · answered Oct 08 '16 at 13:35

1

Use the flexbox layout model. Just add display: flex; to .div-table-row, and remove any float or display property.

Here's the JSFiddle.

answered Oct 08 '16 at 13:35

Khaled Mashaly

1,115
9
16

Aakash Thakur · Answer 3 · 2016-10-08T12:40:06.810

0

Check this out for some dynamic behaviour:

jQuery

var a=$(".second").outerHeight();

$(".first").height(a);
$(".third").height(a);

https://jsfiddle.net/1cejh0dL/6/

edited Oct 08 '16 at 12:40

answered Oct 08 '16 at 11:47

Aakash Thakur

3,837
10
33
64

Sorry didn't get you.Whar disappears? – Aakash Thakur Oct 08 '16 at 11:50
Man what is the problem in this one. I mean you wanted it to stretch full. So I gave it the height of what is there in the second `div-table-col`. Atleast thats what your picture suggests – Aakash Thakur Oct 08 '16 at 12:48
I did not ask to do it with jQuery...i want to do it with css. What if i have 15 rows and 6 columns? should i set all of them using jQuery? – Emaborsa Oct 08 '16 at 12:50
This code would be applicable in that scenario too. You can give same class to `div-table-col` divs that do not have the maximum height and then can set the height of those divs to the height of maximum `div-table-col`. Watch this fiddle on a full screen. https://jsfiddle.net/1cejh0dL/7/ – Aakash Thakur Oct 08 '16 at 12:57

CSS - height

3 Answers3

CSS -
height