What causes the disparity in the rendering of iframe content height when using "src" compared to "srcdoc"?

After comparing the behaviors of iframes with src and srcdoc, I stumbled upon a puzzling difference: a div set to 100% height renders as the full height of the iframe when using src=[data uri], but not with srcdoc.

The issue can be easily replicated with this code snippet: https://codepen.io/jamadeo/pen/LYJMzEG

When using src along with an inlined data URI, the div fills the entire height of the iframe:

<iframe src="data:text/html,<div style=&quot;background-color: red; height: 100%&quot;>hello, world</div>"></iframe>

However, when using srcdoc, the div is only the height of its content.

<iframe srcdoc="<div style=&quot;background-color: red; height: 100%&quot;>hello, world</div>"></iframe>

This discrepancy between the two methods was unexpected. While researching differences in behavior between src and srcdoc, I found ample information on cross-origin issues and browser compatibility, yet nothing regarding rendering discrepancies.

htmlcssiframe

Answer №1

srcdoc automatically creates a document in standards mode, while src does not. To achieve the same result, you must include <!DOCTYPE html> at the beginning of the src content.

For detailed guidelines, refer to HTML living standard, 13.2.6.4.1 The "initial" insertion mode and pay attention to sections that mention "if the document is not an iframe srcdoc document..."

<iframe src="data:text/html,<!DOCTYPE html><div style=&quot;background-color: red; height: 100%;&quot;>hello, world</div>"></iframe>

<iframe srcdoc="<div style=&quot;background-color: red; height: 100%;&quot;>hello, world</div>"></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

I encounter a difficulty in changing the background color when I click on the horizontal navigation menu, as it does not display the currently selected menu

.unorder_Hnav,li,.classes:active { background-color:#7CA738; height: 50px; display: table-cell; width: 1024px; text-align: center; line-height: 52px; font-weight: bolder; color: #FFFFFF; background-color: #457025; ...

htmlcss

Transforming a triangular shape into a square using Plane Geometry in THREE.js

I have an animation created with triangles in the link below. Is there a way to convert these triangular areas into squares? The animation currently has a line running through the middle when using "PlaneGeometry". Removing this line would turn the triangl ...

javascriptjquerycssthree.js

Embarking on the journey of creating mobile web applications - where should you begin?

How can I begin learning to create mobile web apps? I have a keen interest in the design aspects, particularly the effects and animations that give them a native appearance. I suspect there are differences in CSS, HTML, and possibly JavaScript compared to ...

htmlcssmobile

Creating a square shape in Twitter Bootstrap to frame an item on a webpage

I've been working on creating a webpage that looks similar to the image provided. I've managed to get about 90% of it done, but there are a couple of issues I'm facing: How can I create a square with a triangle at the bottom as shown in th ...

javascripttwitter-bootstrapcsstwitter-bootstrap-3ionic-framework

JavaScript dropdown menu that dynamically changes colors

<!DOCTYPE html> <html> <head> </head> <body> <script> var redtoggle=false; function togglered() { redtoggle = !redtoggle; if (redtoggle) { document.getElementById("txtInput").style.color = "red"; } else { do ...

javascripthtmlcss

Can a website be designed to render consistently across all browsers without relying on a CSS reset?

Is it possible to create a website that renders well across all browsers without using CSS reset? Should CSS reset be used for websites of all sizes - small, one-page, large? Is it better to write all the CSS without a reset and only address necessary rend ...

htmlcss

Having trouble with the jQuery toggle functionality not working as expected

I'm implementing a function where a div should increase in height and opacity when clicked, and then revert back to its original state when clicked again. I used the toggle function for this purpose, but the issue is that the button disappears when th ...

javascriptjqueryhtmlcss

Conceal HTML Table Rows

I have a HTML table that showcases items and their respective daily information - usage, incoming shipments, and inventory. The goal is to initially hide the first two columns and reveal them on mouseover using jQuery. I am planning to assign a class to ea ...

htmlcss

Can anyone recommend a high-quality jQuery lightbox replica?

Key Features Needed: Customizable with CSS Capable of handling forms, not just images Extensively documented Please provide any recommendations and suggestions for suitable options. Thank you in advance ...

javascriptjquerycsslightbox

Changing the name of a CSS file on the live server

I was recently browsing a website and noticed that they had given their CSS file a really long name. The website in question is It seems like they are using Twitter Bootstrap as their web UI framework, so I'm curious as to why they would choose such ...

css

How come my jQuery validation needs two clicks to activate?

I am experiencing an issue with a comments form that has 2 fields: Author and Message. Upon clicking the submit button, the validation does not trigger initially. However, if I click the submit button again, then the validation works as expected. Any tho ...

jqueryasp.nethtmlajaxjquery-ui

In PHP, the symbol "!=" is used to compare if a string is not equal to a

Seeking feedback on why setting a string variable prevents me from calling it within a function. For instance: $name = "name"; $quote_name = "'".$name."'"; //echo of $name = name //echo of $quote_name = 'name' In PHP, I encounter iss ...

phphtml

The HTML container expands in height with each adjustment of the window size

I am working on a simple three.js scene within a canvas element, and I want it to adjust dynamically upon window resize events. Specifically, I want the width of the canvas to change while keeping the height constant. Usually, I use window.innerWidth and ...

htmlcanvasthree.jselementwindow-resize

Ways to tally HTML elements using VBA

Currently, I am delving into the world of creating a web scraping tool using VBA to extract event details and store them in an Excel sheet. Within this endeavor, I am faced with deciphering HTML code snippets that resemble the following: <div class="a ...

htmlexcelvbaweb-scraping

How can I make JavaScript skip over a specific portion of my HTML code?

I have a script running on all pages of my website. I would like it to continue running on the specific page, but ignore a certain section. For example: <p>process with javascript</p> <p>skip, instruct javascript function to ignore</ ...

javascripthtml

Is it possible to change %20 in a URL to a hyphen?

Is there a way for my search form to display %20 in the URL when I fill the input field with spaces? For example: Basketball coach Current output: basketball%20coach Desired output: basketball-coach <form action="/tag/" id="form-hockey_v1" name=" ...

javascripthtmlurl

A guide on displaying containers with jQuery and CSS

Looking to create a smiley survey using only Front-End technologies. Once a radio button is selected, the associated content should appear for comments. Currently, I have set up my CSS with display: none. I attempted to implement this functionality using ...

javascriptjquerycss

Activate the preview mode by transmitting information between two controllers

I'm trying to set up a preview mode in one controller to show an image in another controller using an angular service. However, I'm struggling with the final step of getting the URL from the passed parameter into the ng-src in SideMenuCtrl dynami ...

htmlangularjs

Guide to adjusting the screen resolution on your iPad 3

Hello everyone, I'm fairly new to designing for the iPad 3. Could someone please provide some guidance on how to set media queries specifically for the iPad 3? Thank you in advance. ...

css

Is it possible to have a div automatically scroll when hovered over, while also hiding the scroll bar specifically for that div?

Is there a way to autoscroll a specific element onmouseover or via an image map while also hiding the scrollbars for that div? I seem to be struggling with this task despite weeks of learning javascript and not being able to find the right solution online. ...

javascripthtmlonmouseoverautoscroll