Modify CSS based on the size of the containing iframe dynamically

My website is embedded on partner sites through an iframe, but the length of my new website exceeds the space allocated in the iframes set by my partners (who have disabled scrolling).

Since I am unable to adjust the settings on my partner sites, I need to modify my own site to ensure everything functions correctly. I have discovered that I can add 

<div style='width:325px;height:400px;overflow:scroll'>
, as long as the dimensions match those of the parent iframe.

Is there a way for me to dynamically determine the width and height of the parent iframe so that I can apply it to my own site? Alternatively, can I use the viewport to gauge the size of the parent container?

<iframe srcdoc="
<html><body>
<div style='width:325px;height:400px;overflow:scroll'>
<h1>Hello,<b>world1</b>.</h1><br /><h1>Hello,<b>world2</b>.</h1><br /><h1>Hello,<b>world3</b>.</h1><br /><h1>Hello,<b>world4</b>.</h1><br /><h1>Hello,<b>world5</b>.</h1><br /><h1>Hello,<b>world6</b>.</h1><br /><h1>Hello,<b>world7</b>.</h1><br /><h1>Hello,<b>world8</b>.</h1><br />
</div></body></html>" 
scrolling="no" width=325px height=400px>

</iframe>

javascripthtmlcssiframe

Answer №1

Utilize the viewport width and height using: width:100vw height:100vh

Here's a code snippet for reference:

<iframe srcdoc="
<html><body>
<div style='width:100vw;height:100vh;overflow:scroll'>
<h1>Hello,<b>world1</b>.</h1><br /><h1>Hello,<b>world2</b>.</h1><br /><h1>Hello,<b>world3</b>.</h1><br /><h1>Hello,<b>world4</b>.</h1><br /><h1>Hello,<b>world5</b>.</h1><br /><h1>Hello,<b>world6</b>.</h1><br /><h1>Hello,<b>world7</b>.</h1><br /><h1>Hello,<b>world8</b>.</h1><br />
</div></body></html>" 
scrolling="no" width=325px height=400px>

</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

The system could not identify 'react-scripts' as a valid command, either internal or external, and the JSON file has been deleted

The error message reads 'react-scripts' is not recognized as an internal or external command, operable program or batch file. I have attempted the following: npm install npm install react-scripts --save npm i -g react-scripts https://github.com/ ...

htmlreactjsjsonoutput

Having trouble displaying the :before element on a ReactiveForms input

Is anyone else experiencing difficulty displaying a FormControl on a form to hold a telephone country code prefix with a plus sign always visible in the left-padding area? I attempted to use a :before element on the input, but even after inspecting in DevT ...

cssformsangular

Tips for adjusting the Point based on the alignment of the line

In my current project, I am utilizing React THREEJS along with various libraries like DREI and Meshline to create lines and text elements. I am currently working on drawing a line and need to display the length label next to it. Here is an example of what ...

javascriptthree.js2dreact-three-fiberreact-three-drei

Implement a personalized callback function for a specific resource

Currently, I am using angularjs version 1.1.5 and have a service provider for a resource. In one specific use case, the returned response needs to be reprocessed and some information normalized. Although this is a special case, the resource is utilized thr ...

javascriptangularjsangularjs-service

Encountering cross-domain issues while integrating AngularJS in flex (web control), and trying to retrieve templates/json (local files)

To provide some background on my current endeavor, I am utilizing a Flex application to serve as a container for a web app. Within this Flex app resides a web controller that loads a complete Angularjs application. All necessary files are stored locally wi ...

javascriptapache-flexangularjscross-domainlocal-files

In my current project, I am developing a memory game using Ionic and Angular. The game involves displaying an ever-expanding list of numbers for the user to memorize, followed by the user typing

I am trying to make each number in an array appear and then disappear one by one. However, I have encountered an issue where only the last number shows up when there are multiple numbers in the array. I believe the problem lies within the for loop, but I h ...

htmlangularfor-loopionic-frameworkionic5

Unusual Occurrence: Unexpected Gap at the Beginning of HTML

There seems to be an issue with white space appearing unexpectedly at the top and right side of the file in a website I am working on. Despite adding margin: 0; padding: 0; to both <body> and <html>, the problem persists. After inspecting the ...

csshtml

Issue: Module '../utils/composeObjs' not found after global installation of generator-stencil

Currently, I am in the process of developing a generator for stenciljs which can be found at https://github.com/AkashGutha/generator-stencil Within this project, there is a handy utility function located at the root directory. This function resides in one ...

javascriptnode.jsyeomanyeoman-generatorstenciljs

Is Flex still wrapping elements even when set to nowrap?

My goal is to create a layout with 4 blocks, where the first section contains 2 blocks each occupying 50% of the width, followed by 2 other blocks in the next section. I am utilizing the flex property for this layout. I want the flex-container to take up ...

htmlcssflexbox

Calculate the UV coordinates for a trio of CSG meshes

During a university project, I created a ThreeCSG subtraction in ThreeJS. The challenge I am facing now is applying a texture to this mesh due to the missing UV coordinates after processing. The project requirement mandates that it must be a ThreeCSG objec ...

javascriptgraphicsthree.js3dthreecsg

Keep the division visible once the form has been successfully submitted

Initially, I have created 3 divs that are controlled using input type buttons. These buttons serve the purpose of displaying and hiding the hidden divs. Within these divs, there are forms to store data. Currently, my goal is to ensure that the div that was ...

javascriptjqueryhtmlcssforms

Guide to switching classes with jquery

On my webpage, I have a star rating system that I want to toggle between "fa fa-star" and "fa fa-star checked" classes. I found some information on how to do this here: Javascript/Jquery to change class onclick? However, when I tried to implement it, it di ...

javascripthtmljquery

Picking a live Selected choice within an HTML form

I currently have a dropdown menu that displays a list of employee names: <select class="form-control" id="assignee" name="assignee" style="max-width: 300px;"> <option value="Employee 1">Employee 1</option> <option value="Em ...

phphtmlsql

Is there a way to ensure that the tab character " " remains consistent in size within a textarea at all times?

My current challenge involves inserting tabs of the same size into a textarea. The example shows that the only variation in each line of the testString is the placement of the \t. However, when displayed in the textarea, the tab sizes differ dependi ...

javascripthtmlcss

What is the best way to align an image and text in a grid?

As a novice in the world of HTML and CSS, I am attempting to master the 1fr 1fr grid layout for my "welcome" section. My goal is to have an image on the left side and text on the right side. However, when I switch to Responsive mode in Inspect, my grid col ...

htmlcsscss-grid

When implementing components, Material UI encounters errors in trying to read properties of null

Currently, I am facing a challenge in displaying text using MUI in Next.js. I initialized my Next app using npx create-next-app. To troubleshoot the issue, I have attempted deleting node-modules and running npm i, repeating the process in the parent direct ...

javascriptreactjsreact-hooksnext.jsmaterial-ui

A JSON object received from an AJAX request is either null or empty

I recently deleted a previous question that I had posted because it was no longer relevant and there was another issue to address. The response provided below is very clear, more so than other responses, and I believe it will be beneficial for anyone else ...

javascriptjavajsonajaxservlets

Tips for making a flash video reload a text file on the internet

Apologies for my uncertainty in summarizing the question. Here's the issue: I have a .swf file on a website that pulls text from a .txt file in the same directory. However, once the .swf has been loaded once, the cookies need to be cleared in order fo ...

htmlactionscript-3

continuously refresh choices available for selection

I am looking for a way to dynamically populate the second select option based on the selection made in the first select option. While I know how to achieve this using traditional jQuery and HTML, I was wondering if there is a way to update options_for_sele ...

jqueryhtmlruby-on-rails

Exploring through an array tree structure?

My menu displays the "selected" array as options. When an option is selected, its branches are rendered as new options. To keep track of the traversal, I create an array called select. For example, if someone selects the 3rd option, then the 1st option, a ...

javascriptjquerycoffeescript