Cutting an iframe: Remove the bottom 100 pixels

I am aiming to embed an iframe, which height can vary and I need to crop the bottom 100px of it. The code snippet I am currently using is:

<iframe id="booking-content" title="booking-content"
        src="https://outlook.office365.com/owa/calendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33607761615647525a5f705c5d40465f475a5d5473405741415647525a5f1d505c5e">[email protected]</a>/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, applying clip-path creates a white border at the bottom as shown in this https://i.sstatic.net/XQNwK.png.

You can view a functioning example with the same code used in the image above by clicking here.

Thank you very much! (This question is somewhat related)

htmlcssiframecrop

Answer №1

Instead of using clip-path, you can achieve the desired effect by simply adjusting the height with height: calc(100vh - 100px) :

iframe {
  width: 1024px;
  height: calc(100vh - 300px);
  overflow: hidden;
  margin: 0 auto;
  border: none;
}
<h1 id="welcome">Adjusting iframe height</h1>
<p>How do I remove the extra white space at the bottom? (caused by clip-path)</p>

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

Answer №2

When the content before the iframe is variable and can change in height, you will need to calculate the total height up to the iframe and then subtract this height from the iframe's 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

If on a mobile device, distribute to various random arrays of websites

On my website, I have a page that redirects users to a random page within the site. However, I am looking to streamline this process for mobile users by reducing the list of random pages they can be redirected to. I have been experimenting with different o ...

javascripthtml

Unable to navigate through images on Bootstrap Carousel using previous and next buttons

Despite following tutorials and examining the HTML code on bootstrap, I'm facing issues while trying to create a carousel. I believed that everything was done correctly, but when I click on the next button, nothing happens. <!DOCTYPE html> < ...

javascripthtmlcssbootstrap-4carousel

Issue encountered while executing PHP function file_get_contents

Executing the file_get_contents($file) function is necessary to retrieve the HTML encoded file. The function crashes and returns: failed to open stream: Invalid argument Oddly enough, if I input a text string with the path instead of using a variable ...

phphtml

What is the best way to customize the font in a Marquee code using HTML?

I am a beginner to coding and have been searching for HTML code to create an infinite marquee text. After hours of looking, I found one on by inspecting the elements on their page. When I copied and pasted the code into my site, the font didn't displ ...

html

The location of the footer is not aligned correctly

Recently, I encountered an issue that has left me puzzled. The problem is that the footer on my webpage is appearing between the calendar button and the calendar itself. Here is a snippet from my calendar.html file: {% extends 'base.html' %} {% ...

htmlcssdjango

What could be causing this text to not center properly on mobile devices?

Here is the main content. There are no alignment commands in the CSS or HTML. Check out the jsfiddle: https://jsfiddle.net/9t4afmx3/ Any idea why it's left-aligned on mobile devices? <body> <p align="center"><img src="Screen Shot 20 ...

htmlcss

Display the subsequent fieldset using the following button

Currently working on developing a webpage that involves dynamic data utilizing the fieldset element. Despite implementing a function to display the next fieldset upon clicking the Next button, I am facing an issue where it is not functioning as expected. T ...

javascripthtmljquerybootstrap-4fieldset

Retrieve the value of the option that has been selected and then send it over to the function

Hello, I am currently working on creating a reservation page using Razor Pages in ASP.NET. The page includes two drop down lists - one for selecting the location and the other for choosing a room within that specific location. I want to pass the selected l ...

htmlasp.net.netasp.net-corerazor

Why is the event handler producing no value?

Imagine if I tried to attach a jQuery click event handler to one of the functions in my objects, but for some reason it keeps returning undefined on my properties. Why is this happening? var buttonView = { label : 'underscore', ...

javascripthtmljquerydomjquery-events

Ways to eliminate non-breaking spaces in HTML coding without using software

Although similar questions have been asked in the past, I am new to coding in Javascript and struggling to adapt the existing advice to fit my specific situation. My current challenge involves removing "&nbsp" from the hardcoded table row below. Ideal ...

javahtmlhard-coding

The HexColor value cannot be applied to the backgroundColor property

I need assistance with a small code that includes two buttons. I am trying to change the color of the first button to green when the mouse hovers over it, and the color of the second button to red under the same condition. Initially, I set the color withi ...

javascriptcssreactjsmaterial-uibackground-color

Showing a multi-column layout for an HTML ul list

I have an automatic nested list structure that looks like this <ul> <li>AAA</li> <li>BBB <ul> <li>111 <ul> <li>XXX</li> </ul> </li> <l ...

javascriptjqueryhtmlcss

Unlocking the full potential of Flexbox for your material design dashboard layout

I am looking to create reusable templates that feature a clean and minimalist flex-based CSS design. The template I am working on is for a dashboard containing five "cards" of varying sizes. Cells 2, 3, and 5 should be of equal width, approximately a quart ...

htmlcssflexbox

Is there a way to obtain the Base64 data following the conversion of a div to an image?

I am not very experienced with JavaScript, but I wanted to convert a div to an image. I came across this helpful jsfiddle that showed me how to do it. $(function() { $("#btnSave").click(function() { html2canvas($("#widget"), { on ...

javascriptjqueryhtmlcanvaspng

Angular's NGX Spinner is efficiently blocking the entire page

I'm currently incorporating ngx-spinner into my Angular application, but I'm running into an issue where it's loading on the entire page instead of just a specific area. Below is the code that I'm using: <p> Hello name </p> ...

cssangularngx-spinner

Utilize CSS to wrap text around an image and adjust positioning at a specific breakpoint

Having a bit of a challenge with responsive css here. I'm working on articles where there's text on the left and an image on the right, with the text wrapping around the image. However, at a certain breakpoint I need the body copy to appear abov ...

htmlcsstext

Accessing variables in nested ng-repeats in Angular 1.x from a controller

Right now, I have an HTML page with nested ng-repeat and a variable named "isExpand" within the inner ng-repeat. I'm curious if there are any ways to update "isExpand" from the controller. Here is a sample HTML layout: <div ng-repeat="(key, value ...

htmlangularjsangularjs-scope

Verify a different element depending on a selected input

Can anyone provide a jQuery code for validating the following HTML structure (view it on Jsbin)? HTML: <p id="options"> <strong>Options:</strong> <span> <input type="checkbox" name="ids" value="101" id="opcao-0"> <lab ...

jqueryhtmlvalidation

A comprehensive guide on accessing attributes of dynamically generated div elements with jQuery

I am currently working on fetching a list of users from a basic MySQL database table named TableA. The table structure includes fields like Username (varchar), Level (tinyint), and DateCreated (datetime). On an HTML page, there is a search input box, let& ...

javascriptphpjqueryhtmlmysql

Achieving vertical alignment of a button within a div

I am trying to vertically align a button inside a DIV using bootstrap. Currently, the button is within the div and on the same line but slightly lower than desired. Below is the code snippet: <div class="alert alert-info " role="alert" ><div sty ...

csstwitter-bootstrapvertical-alignment