My goal is to embed an iframe (I have no control over it) with variable height and crop off the bottom 100px. The code I have so far is this:

<iframe id="booking-content" title="booking-content"
        src="https://outlook.office365.com/owa/calendar/[email protected]/bookings/"
        scrolling="no" allowfullscreen="allowfullscreen"
        style="width: 1024px; height: 100vh; clip-path: inset(0px 0px 100px 0px);
               overflow: hidden; margin:0 auto; border:none;">
</iframe>

Unfortunately, clip-path generates a white border on the bottom, see:

The working sample with the code to the picture above is Cropping an iframe

How can I get ri$*$d of the white space on the bottom? (due to clip-path)

Thx a lot! (This question is somewhat related)

CodePudding user response：

Instead of using clip-path, just use height: calc(100vh - 100px) :

iframe {
  width: 1024px;
  height: calc(100vh - 300px);
  overflow: hidden;
  margin: 0 auto;
  border: none;
}

<h1 id="welcome">Cropping an iframe</h1>
<p>How can I get rid of the white space on the bottom? (due to clip-path)</p>

<iframe id="booking-content" title="booking-content" src="https://en.wikipedia.org/wiki/World_Wide_Web" scrolling="no" allowfullscreen="allowfullscreen">
</iframe>

CodePudding user response：

if what is before the iframe can be variable, meaning height can change, you'll have to calculate all the height till the iframe, and subtract this height to the iframe height ( 100).

let h = 0;
let el = document.getElementById('welcome');
el.innerHTML = 'Editors';
while (el.nodeName !== 'IFRAME') {
  h  = el.offsetHeight;
  el = el.nextElementSibling;
}
h = window.innerHeight - h - 100;
document.querySelector('iframe').style.height = h   'px';

body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

h1 {
  font-family: Impact, sans-serif;
  color: #CE5937;
}

iframe {
  width: 1024px;
  height: calc(100vh - 300px);
  overflow: hidden;
  margin: 0 auto;
  border: none;
}

<h1 id="welcome">Cropping an iframe</h1>
<p>How can I get rid of the white space on the bottom? (due to clip-path)</p>

<iframe id="booking-content" title="booking-content" src="https://en.wikipedia.org/wiki/World_Wide_Web" scrolling="no" allowfullscreen="allowfullscreen">
</iframe>