# iFrame height issue

**URL:** <https://forum.ionicframework.com/t/iframe-height-issue/177678>\
**Category:** ionic-v3\
**Created:** [November 15, 2019, 2:34pm UTC](https://forum.ionicframework.com/t/iframe-height-issue/177678 "2019-11-15T14:34:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![maid](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@maid](https://forum.ionicframework.com/u/maid)\
**Post date:** [November 15, 2019, 2:34pm UTC](https://forum.ionicframework.com/t/iframe-height-issue/177678/1 "2019-11-15T14:34:18Z")

</div>

Hello,

Has anyone had an issue with iframe height. I am trying to make it take its full height. In my example, I placed iframe inside an accordion, when accordion is shown, iframe appears but with lot of scrolling in it. If I set height property of iframe to specific pixels, it works but it is not propper solution, preferred would be to automatically set its full height.

I would be very thankful to hear Your comment about this.

```auto
<div *ngIf="showReservationAccordion">
      <ion-card>
        <ion-card-header style="color:white;" (click)="toggleAccordion()">
          <ion-grid style="--ion-grid-padding: 0px; color:white;">
            <ion-row style="align-items: center;">
              <ion-col style="--ion-grid-column-padding:0px; margin-top: -2px;">
                <ion-label style="font-size:14pt; font-family: 'Fjalla One'">OPEN ACCORDION</ion-label>
              </ion-col>
              <ion-col size="1" style="--ion-grid-column-padding:0px; margin-top: -5px;">
                <ion-icon [ngStyle]="{'transform':!accordionExpanded ? 'rotateZ(-180deg)' : 'rotateZ(0deg)'}" mode="md"
                  name="arrow-dropup" style="transition: all 0.4s ease;
                  float: right;
                  margin-top: 2px;"></ion-icon>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-card-header>

        <ion-card-content [ngStyle]="{'display':accordionExpanded ? 'block' : 'none'}" style="border-radius: 0px 0px 29px 29px ;
        background-color:white; padding: 0;">
          <iframe style="width:100%; height:-webkit-fill-available"
            src="https://www.w3schools.com" frameborder="0"
            allowfullscreen>
          </iframe>
        </ion-card-content>
      </ion-card>
    </div>

```

---

<div class="post-metadata">

**Author:** ![maid](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@maid](https://forum.ionicframework.com/u/maid)\
**Post date:** [December 9, 2019, 8:55am UTC](https://forum.ionicframework.com/t/iframe-height-issue/177678/2 "2019-12-09T08:55:09Z")

</div>

Hello, anyone anything?

---

<div class="post-metadata">

**Author:** ![ManOnMission](https://avatars.discourse-cdn.com/v4/letter/m/b4bc9f/32.png) [@ManOnMission](https://forum.ionicframework.com/u/ManOnMission)\
**Post date:** [December 9, 2019, 9:08am UTC](https://forum.ionicframework.com/t/iframe-height-issue/177678/3 "2019-12-09T09:08:53Z")

</div>

Apply height as 100% to div, ion-card, ion-card-content and iframe.

---

<div class="post-metadata">

**Author:** ![maid](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@maid](https://forum.ionicframework.com/u/maid)\
**Post date:** [December 9, 2019, 12:03pm UTC](https://forum.ionicframework.com/t/iframe-height-issue/177678/4 "2019-12-09T12:03:55Z")

</div>

Thanks for your reply. It doesn’t seem to work. The only height value that makes my iframe bigger is `height: -webkit-fill-available;` or when making it fixed e.g` height: 500px;`.  
`height: 100%;` makes it even smaller than `height: -webkit-fill-available;` I am not sure why.

---

<div class="post-metadata">

**Author:** ![ManOnMission](https://avatars.discourse-cdn.com/v4/letter/m/b4bc9f/32.png) [@ManOnMission](https://forum.ionicframework.com/u/ManOnMission)\
**Post date:** [December 10, 2019, 6:09am UTC](https://forum.ionicframework.com/t/iframe-height-issue/177678/5 "2019-12-10T06:09:49Z")

</div>

Have you applied height:100% to ion-card and also to ion-card content? And also to Div?

---

<div class="post-metadata">

**Author:** ![maid](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@maid](https://forum.ionicframework.com/u/maid)\
**Post date:** [December 10, 2019, 8:27am UTC](https://forum.ionicframework.com/t/iframe-height-issue/177678/6 "2019-12-10T08:27:19Z")

</div>

I did, it doesn’t seem to be working

---

<div class="post-metadata">

**Author:** ![ManOnMission](https://avatars.discourse-cdn.com/v4/letter/m/b4bc9f/32.png) [@ManOnMission](https://forum.ionicframework.com/u/ManOnMission)\
**Post date:** [December 10, 2019, 9:14am UTC](https://forum.ionicframework.com/t/iframe-height-issue/177678/7 "2019-12-10T09:14:44Z")

</div>

Please check the screen and my code.

 ![19%20PM](https://global.discourse-cdn.com/ionicframework/original/3X/7/8/78a06cf4886e5335f03a53d4072d3c752c628d09.png)

````auto
  <div *ngIf="showReservationAccordion" style="height:100%">
    <ion-card style="height:100%">
      <ion-card-header style="color:white;" (click)="toggleAccordion()">
        <ion-grid style="--ion-grid-padding: 0px; color:white;">
          <ion-row style="align-items: center;">
            <ion-col style="--ion-grid-column-padding:0px; margin-top: -2px;">
              <ion-label style="font-size:14pt; font-family: 'Fjalla One'">OPEN ACCORDION</ion-label>
            </ion-col>
            <ion-col size="1" style="--ion-grid-column-padding:0px; margin-top: -5px;">
              <ion-icon [ngStyle]="{'transform':!accordionExpanded ? 'rotateZ(-180deg)' : 'rotateZ(0deg)'}" mode="md"
                name="arrow-dropup" style="transition: all 0.4s ease;
                  float: right;
                  margin-top: 2px;"></ion-icon>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-card-header>

      <ion-card-content [ngStyle]="{'display':accordionExpanded ? 'block' : 'none'}" style="border-radius: 0px 0px 29px 29px ;height:100%;
        background-color:white; padding: 0;">
        <iframe style="width:100%; height:100%" src="http://www.youtube.com/embed/" frameborder="0" allowfullscreen>
        </iframe>
      </ion-card-content>
    </ion-card>
  </div>```
````

---

<div class="post-metadata">

**Author:** ![maid](https://avatars.discourse-cdn.com/v4/letter/m/fbc32d/32.png) [@maid](https://forum.ionicframework.com/u/maid)\
**Post date:** [December 10, 2019, 2:08pm UTC](https://forum.ionicframework.com/t/iframe-height-issue/177678/8 "2019-12-10T14:08:01Z")

</div>

Thanks for your reply. I have followed steps exactly as you did but with no luck. It works on iOS with version of 12 indeed but on newer ones no… strange. Best results I get when set` height:-webkit-fill-available`. It still doesn’t make iframe take whole screen but it is bigger comparing when using `height:100%;`. I am not sure what is happening here.