Как заставить div внутри таблицы заполнять оставшееся пространство - PullRequest
Новая
       37

Как заставить div внутри таблицы заполнять оставшееся пространство

1 голос
/ 03 августа 2020

Учитывая приведенную ниже структуру HTML, как мне заставить td.expand заполнить оставшееся вертикальное пространство #outer? Я пробовал разные решения (в том числе Flexbox), но у меня ничего не работало. К сожалению, я застрял с двумя таблицами, поэтому предположим, что структура HTML не может быть изменена. Кроме того, предположим, что #outer находится внутри модального окна, размер которого может быть изменен, поэтому его высота равна динамическому c (то есть, когда пользователь изменяет размер модального окна, высота #outer изменяется, а td.expand должен постоянно заполнять вверх по вертикали так, чтобы верхний и нижний колонтитулы всегда были вверху и внизу #outer соответственно. 

#outer {
  height: 400px; /* dynamic */
  background: skyblue;
}
.fixed {
  height: 20px;
}
header,
footer {
  height: 50px;
  border: 1px solid black;
}
<div id="outer">
  <div id="container">
    <header>Header</header>
    <table class="outer-table">
      <tr>
        <td>
          <div class="content">
            <table class="inner-table">
              <tr><td class="expand">This should fill up remaining vertical space.</td></tr>
            </table>
          </div>
        </td>
      </tr>
      <tr class="fixed"><td>Fixed height</td></tr>
      <tr class="fixed"><td>Fixed height</td></tr>
    </table>
    <footer>Footer (should be pushed to the bottom)</footer>
  </div>
</div>

Результат должен выглядеть следующим образом, где td.expand заполняет оставшееся пространство #outer:

введите описание изображения здесь

Ответы [ 2 ]

1 голос
/ 03 августа 2020

Немного поигрался с флексом. Вам нужен был такой результат? Красный блок растягивается. 

#container {
  display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.outer-table {
    display: flex;
    height: 100%;
}

.outer-table > tbody {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.outer-table > tbody > tr:first-of-type {
    flex: 1 1 auto;
}

.outer-table > tbody > tr > td {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#outer {
  height: 400px;
  background: skyblue;
}
header,
footer {
  height: 50px;
  border: 1px solid black;
}
.content {
  background: red;
  flex: auto;
}
<div id="outer">
  <div id="container">
    <header>Header</header>
    <table class="outer-table">
      <tr>
        <td>
          <div class="content">
            <table class="inner-table">
              <tr><td class="expand">This should fill up remaining height of #outer (blue)</td></tr>
            </table>
          </div>
        </td>
      </tr>
      <tr><td>Fixed height</td></tr>
      <tr><td>Fixed height</td></tr>
    </table>
    <footer>Footer</footer>
  </div>
</div>
1 голос
/ 03 августа 2020

Просто вычислите height, вычтя занятые height на footer и header и два tr из родительского height

#outer {
  height: 400px;
  background: skyblue;
}

header,
footer {
  height: 50px;
  border: 1px solid black;
}

.content {
  background: red;
  height: 245px;
}
<div id="outer">
  <div id="container">
    <header>Header</header>
    <table class="outer-table">
      <tr>
        <td>
          <div class="content">
            <table class="inner-table">
              <tr>
                <td class="expand">This should fill up remaining height of #outer (blue)</td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
      <tr>
        <td>Fixed height</td>
      </tr>
      <tr>
        <td>Fixed height</td>
      </tr>
    </table>
    <footer>Footer</footer>
  </div>
</div>
...