CODEWITHSUNDEEP
css
Georgy Liparteliani
Georgy Liparteliani

Reputation: 403

Auto height of table-row

In JSFiddle example you can see 2 table-rows. I need the first one's height to be set automatically. Second one's height need to be set to the bottom of the page. But the browser sets table row height as 50%...

.table {
    display: table;
    table-layout: auto;
}
html,body {
    height: 100%;
    min-height: 100% !important;
}

.row {
    display: table-row;
    border: 1px solid black;
}

Upvotes: 4

Views: 35060

Answers (3)

user9681907
user9681907

Reputation: 1

Just Add these lines and you will get the required result:

<div class="last">
    <div>Need height to bottom</div>
</div>

.last
{
    height: 100%;
}

Upvotes: 0

Danield
Danield

Reputation: 125463

Set height:100% on the second row.

<div class="row">
        <div>Some text</div>
        <div>Text again</div>
    </div>
    <div class="row last">
        <div>Need height to bottom</div>
    </div>

CSS

.row {
    display: table-row;
    border: 1px solid black;
}
.last
{
    height: 100%;
}

FIDDLE

Upvotes: 5

Satyam Koyani
Satyam Koyani

Reputation: 4274

content which you want to show at bottom of the page apply this class to that division.

.row { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}

Division at bottom side

Upvotes: 0

Related Questions