CODEWITHSUNDEEP
htmlcss
LuxuryWaffles
LuxuryWaffles

Reputation: 1708

Html table height="100%" not filling parent height

I have 2 tables in my container. One of it will stick to the bottom of the container and the other will fill the remaining height of the parent

Style:

    .page
    {
        width: 21cm;
        min-height: 29.7cm;
        padding: 0.5cm;
        margin: 1cm auto;
        background: white;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        position: relative;
    }

<div class="page">
    <table class="table1" style="height: 100%;">
        <tr>Supposed to fill remaining space</tr>
    </table>
    <div style="position: absolute; bottom: 0;">
        <table class="table2">
             <tr>Floats to the bottom</tr>
        </table>
    </div>
</div>

What I want is for table1 to take up the remaining space left but it isnt filling up the space at all.

Upvotes: 1

Views: 8762

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105903

You could drop the HTML table and use the display instead.

DEMO

<div class="page">
  <div class="tr fullH">
    <div class="td ">
      <section>
        <p> fill avalaible space left</p>
      </section>
    </div>
  </div>
  <div class="tr">
    <div class="td">
      <section>
        <p>Floats to the bottom and expand if needed</p>
      </section>
    </div>
  </div>
</div>

and CSS

.page
{
  width: 21cm;
  height: 29.7cm;
  padding: 0.5cm;
  margin: 1cm auto;
  background: lightblue;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  /*position: relative; unneeded*/
  display:table;/* height turns to be min-height , table expands */
  table-layout:fixed;/* keeps width as set, height stills expands if needed */
}
.tr {
  display:table-row;
}
.td {
  display:table-cell;
}
.fullH {
  height:100%;
}

Using the display:flex; property makes it very simple:

DEMO 2

HTML

<div class="page">

      <section class="fullH">
        <p>Supposed to fill remaining space</p>
      </section>

      <section>
        <p>Floats to the bottom and expand if needed</p>
      </section>

</div>

and CSS

.page
{
  width: 21cm;
  height:29.7cm;
  padding: 0.5cm;
  margin: 1cm auto;
  display:flex;
  flex-direction:column
}

.fullH {
  flex:1;
}

Upvotes: 2

geekman
geekman

Reputation: 2244

Yes, it requires a height on the parent directly, your code looks like it will work on first look, but it doesn't for tables. First you are adding content to tr directly add that to td to make the table adjust height of cell.

Here is a workaround code that will work fine:

.page
{
    width: 21cm;
    min-height: 29.7cm;
    padding: 0.5cm;
    margin: 1cm auto;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    position: relative;
}
<div class="page">
    <div style="height:100%;">
    <table class="table1"  style="height:100%;">
        <tr><td>Supposed to fill remaining space</td></tr>
    </table>
   </div>
    <div style="position: absolute; bottom: 0;">
        <table class="table2">
             <tr><td>Floats to the bottom</td></tr>
        </table>
    </div>
</div>

And this is not the right way of creating layouts nor the right way to add styles. Inline styles are never a good practice

Upvotes: 1

Related Questions