Question 44627 in Html Question posted in
Some basic documentation can be found here.

this is a question for the expert css about Iframe hieght – Html

I created a page with 2 cases the first is the then I have iframe that calls the link like here:

enter image description here

I want this iframe to take the rest of the height without using JS, just CSS .
here is the body code :


<body>
    <header>
        <div class="header-titles">
            <div class="site-logo faux-heading">
                <a href="https://www.psdgratuit.com/" class="custom-logo-link" rel="home"></a>   
            </div> 
        </div>
    </header>
    <main>
        <h1>{{title}}</h1>
        <h2>Download in progress</h2>
        <p>
            Your download strat automaticlly in few seconds <span class="blink_me">..</span> if it doesn't. 
            <a href="{{file}}" id="downloadLink" download class="blink_me display-none">Please click here to strat it manually</a>
        </p>
    </main>
    <!-- I want this iframe take the rest of hieght-->
    <iframe src="https://unynow.com/blog/2023/03/01/zero-calorie-sweetener-linked-to-heart-attack-and-stroke-risk/" width="100%"  style="min-height: 500px;" frameborder="0"  ></iframe>
    
</body>

i try style="min-height: 500px;" but is a min hieght

Tags:

2

Answers


  1. 0

    Try using height: -webkit-fill-available; for the iframe tag.

    <body style="margin:0;">
    <header>
        <div class="header-titles">
            <div class="site-logo faux-heading">
                <a href="https://www.psdgratuit.com/" class="custom-logo-link" rel="home"></a>   
            </div> 
        </div>
    </header>
    <main>
        <h1>{{title}}</h1>
        <h2>Download in progress</h2>
        <p>
            Your download strat automaticlly in few seconds <span class="blink_me">..</span> if it doesn't. 
            <a href="{{file}}" id="downloadLink" download class="blink_me display-none">Please click here to strat it manually</a>
        </p>
    </main>
    <!-- i want this iframe take the rest of hieght-->
    <iframe src="https://unynow.com/blog/2023/03/01/zero-calorie-sweetener-linked-to-heart-attack-and-stroke-risk/" width="100%"  style="min-height: 500px; height: -webkit-fill-available;" frameborder="0"  ></iframe>
    
</body>
    Login or Signup to reply.
  2. 0

    Please Try This types of code changes might be working for you.

     body{
    height: 100vh;
    overflow-y: hidden;
    padding: 0;
    margin: 0;
}
iframe{
    height: 100vh;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
    <header>
        <div class="header-titles">
            <div class="site-logo faux-heading">
                <a href="https://www.psdgratuit.com/" class="custom-logo-link" rel="home"></a>   
            </div> 
        </div>
    </header>

    <!-- i want this iframe take the rest of hieght-->
    <iframe src="https://unynow.com/blog/2023/03/01/zero-calorie-sweetener-linked-to-heart-attack-and-stroke-risk/" width="100%" frameborder="0"></iframe>

  </body>
</html>

    This works well for me.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search