Как заставить внедренный объект заняться всей высотой контейнера div?

164
12

Я использую angular2/4 и angular -материал (https://material.angular.io/), и я хочу вставить в него PDF файл, Проблема в том, что высота apepars для PDF-объектов мала и не заполняет все пространство контейнера. Я могу вручную прикрепить стиль = "500 пикселей", чтобы высота была 500 пикселей, но если я просто сделаю высоту 100%, тогда высота будет испорчена. Ширина в порядке с 100%.


Как мне получить свой pdf-объект для заполнения всей высоты контейнера?


<md-tab-group>
<md-tab label="Tab 1">
<object data="https://pdfobject.com/pdf/sample-3pp.pdf#page=2" type="application/pdf" width="100%" height="100%">
<p><b>Example fallback content</b>: This browser does not support PDFs. Please download the PDF to view it: <a href="/pdf/sample-3pp.pdf">Download PDF</a>.</p>
</object>
</md-tab>
<md-tab label="Tab 2">Contents of Tab 2</md-tab>
</md-tab-group>

спросил(а) 2021-01-25T19:27:16+03:00 4 месяца, 3 недели назад
1
Решение
152

вы можете попробовать использовать функцию CSS calc() с единицами vh (высота представления):


<md-tab-group>
<md-tab label="Tab 1">
<object data="https://pdfobject.com/pdf/sample-3pp.pdf#page=2"
type="application/pdf"
style="height:calc(100vh - 70px)"
width="100%">
<p><b>Example fallback content</b>: This browser does not support PDFs.
Please download the PDF to view it:
<a href="/pdf/sample-3pp.pdf">Download PDF</a>.
</p>
</object>
</md-tab>
<md-tab label="Tab 2">Contents of Tab 2</md-tab>
</md-tab-group>

Я использовал здесь style="height:calc(100vh - 70px)" с компенсацией 70px для заголовков md tab и заголовков плунжера.

Если вы хотите, чтобы ваш код был полностью автоматизирован, вы можете рассчитать это значение компенсации в ngAfterViewInit hook вашего компонента, используя Renderer2 или ElementRef, а затем используйте его в директиве ngStyle в своем HTML


plunker: https://plnkr.co/edit/LRscYr4A13HEjWAmCNo9?p=preview

ответил(а) 2021-01-25T19:27:16+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема