Угловая раскладка 7 делает родительскую таблицу заполненной, но не растягивающей родительской - PullRequest
Новая
       23

Угловая раскладка 7 делает родительскую таблицу заполненной, но не растягивающей родительской

1 голос
/ 27 сентября 2019

Привет У меня возникла проблема с примером в stackblitz .В основном я хочу ограничить таблицу на одной странице и заполнить оставшуюся часть высоты после заголовка.Если высота стола больше этого, я бы хотел, чтобы он был скрыт.Но из примера кажется, что таблица растягивает своего родителя.Что я могу сделать, чтобы ограничить высоту стола?Спасибо.

1 Ответ

0 голосов
/ 27 сентября 2019

Попробуйте установить height для div и использовать overflow свойство: 

<div fxLayout='column' fxFill style=' border: red 10px solid'>
  <div>
    <h1>Header 1</h1>
  </div>
  <div style='border: 1px solid black; overflow: auto; height:100px' fxFill>
    <table fxFlex='100%'>
      <!-- The code omitted for the brevity -->
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
    </table>
  </div>
</div>
</div>

ОБНОВЛЕНИЕ:

Другой способ без фиксированной высоты: 

<div style="height: 100vh;">
<div fxLayout='column' fxFill style=' border: red 10px solid; display: flex; 
    flex-direction:column; position:absolute;top: 0; 
    bottom: 0; left: 0; right: 0;'>
  <div style="flex-shrink: 0;">
    <h1>Header 1</h1>
  </div>
  <div style='border: 10px solid orange; overflow-y: auto;' fxFill>
    <table fxFlex='100%'>
      <!-- The code omitted for the brevity -->
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
    </table>
  </div>
</div>
</div>
...