How to make div fill the height of remaining screen space?

1

Hi,

Now I need to fill the height of remaining screen space with full height div.I know that I can use flex box instead but want to know other ways without using flex box

My code is like this sample.

<table id="page">
     <tr>
        <td id="tdheader"></td>
    </tr>
     <tr>
         <td id="tdcontent">
             <div id="content">...</div>
         </td>
     </tr>
 </table>
1 Like
2 
div#content{
height:100%;
}

it will fill the rest of the space of the screen depending on the parent/main container height

3

yes but It doesnt work

4 
#tdContent {
   height: 100%
}

this will work because giving height to #content will be relative to parent td element so you will have to increase the height of tdcontent itself

1 Like
5

@BayCora, here is what you want

html code

<table id="page">
     <tr>
        <td id="tdheader"> Hello first row</td>
    </tr>
  <tr>
        <td id="tdheader"> Hello second row</td>
    </tr>
     <tr class="fill-me">
         <td id="tdcontent">
             <div id="content">I'll block the rest</div>
         </td>
     </tr>
 </table>

css code

table#page{
  height:100vh;
  width:100%;
  background-color:teal;
}
tr{
  min-height:25px;
}
.fill-me{
  height:100%; 
  background-color:silver;
}