Position fixed iframe neglects right and bottom positioning

Here is the code snippet I am working with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head></head>
   <body>
      <iframe src="http://jl.evermight.net" style="overflow:scroll; display:block; position:fixed; top:10px; bottom:10px; right:10px; left:10px;"></iframe>
   </body>
</html>

I am trying to figure out why the iframe does not fill the entire browser window, leaving a 10px space on all sides. Surprisingly, when I replaced the iframe tag with a p tag while keeping the same style rule, it worked as expected with the p tag.

It seems like the iframe is disregarding my right and bottom CSS rules. How can I make sure that the iframe acknowledges and applies these positioning rules correctly?

cssiframeposition

Answer №1

As per Alan Shortis' recommendation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head></head>
    <body>
        <div style="position:fixed; top:10px; bottom:10px; right:10px; left:10px;">    
            <iframe src="http://jl.evermight.net" style="overflow:scroll;width:100%;height:100%;"></iframe>
        </div>
    </body>
</html>

Answer №2

Does

 position:relative;

function?

Answer №3

In case you decide against utilizing the enclosing div and prefer using position:fixed over absolute positioning, the calc function can be employed to set the width and height.

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

More content will not be displayed beneath folded DIVs arranged to stack on mobile devices

On my website, I have two separate sections dedicated to use cases and benefits. Here is the code: .onboardmessaging { min-width: 100%; } .onboardmessagingwrap { min-width: 100%; } .usecase { padding-left: 8vw; max-widt ...

htmlcss

The border is not displaying for the Child Div element

I am struggling with a webpage that has two nested divs. Despite trying all the suggestions I have found, I still cannot get the inner div to display its border. On the other hand, I have noticed that the parent div's border shows up without any issu ...

csshtmlborder

`A dynamically captivating banner featuring animated visuals created with JQuery`

I am currently in the process of designing a banner for the top of my webpage, but I have yet to come across any code that meets all my requirements. To provide clarification, I have attached an illustration showcasing what I am aiming to achieve. 1) The ...

javascriptjquerycss

The project is experiencing difficulties in loading the Module CSS

Currently, I am working on a React module and have set up a React project to demonstrate the functionality of this module. Initially, everything was working smoothly until I encountered an issue with the webpack configuration related to the CSS loader. { ...

cssreactjsnpm

Click-triggered CSS animations

Trying to achieve an effect with regular JS (not jQuery) by making images shake after they are clicked, but running into issues. HTML: <img id='s1_imgB' class="fragment"... onClick="wrongAnswer()"... JS: function wrongAnswer(){ docume ...

javascriptcsshtmlreveal.js

Using CSS transforms to place the vanishing point

I am attempting to utilize CSS transforms to create a flat 'floor' that extends infinitely towards the horizon. The vanishing point, where the floor disappears into the distance, should align halfway up the browser window. I have encountered an ...

csstransform

The lengthy email exceeds its limits

Take a look at this code snippet: <div className='mt-[3vh] flex h-1/3 min-h-fit w-[80%] min-w-[300px] flex-col content-center items-center justify-center rounded-2xl bg-white shadow-[0_0_8px_rgba(0,0,0,0.2)]'> {user?.image && ...

cssreactjsnext.jstailwind-css

Adjustable Text Size with HTML5 and CSS3

Looking to enhance the accessibility of a website by implementing text size adjustment buttons ' A A A ' using just HTML5 and CSS3. Avoiding the use of jQuery or Javascript for this task. Inspiration drawn from this link. Appreciate any assistan ...

htmlcss

Adjusting page layout following window dimension changes

Every time I work on developing HTML pages, I encounter issues with window resizing. The alignment of the page gets disrupted and elements end up overlapping each other. I want my page to maintain its layout when resized, with scrollbars appearing instea ...

htmlcss

Tips for inserting an HTML table into a div element using JQuery/JavaScript

I currently have a navigation bar with only two items. While I may potentially add more items in the future, for now I am content with just these two. Upon opening the page, my goal is to display the content of the first item in the navigation bar. Each it ...

javascriptjqueryhtmlcss

Printing without page borders

Is there a way to prevent the border on my pages from being printed? I've tried various solutions without success. Here is the code I am currently using: CSS: #pagy2 { background: #f3fff3; border:1px solid #c9dbab; width: 100%; margi ...

cssprintingborder

Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

I would greatly appreciate any assistance with this request, please. Here is the input that I have: <input onchange="UpdateItemQuantity(this.value,1284349,0,10352185,2579246,'','AU'); return false;" type="number" class="form-contro ...

jqueryhtmlcss

Preview your uploaded image before finalizing

I am currently working on implementing a new upload feature for users of our forum. This feature will allow them to upload a personal picture. Here is what I have developed so far: HTML <label>Profile image</label> <div class="phot ...

javascriptjqueryhtmlcss

Unexpected outcomes when generating jQuery pages using CSS

I have created a piece of JavaScript code that populates 3 divs with icons in even rows. However, I am facing an issue where my first two rows align as expected, but the third row starts aligned with .col-5. Can you help me troubleshoot this? function row ...

javascriptjqueryhtmlcsscss-float

Ensure that the navigation menu is consistently displayed properly, without any of its contents extending beyond the

I am experiencing an issue with the navigation menu on my website. Everything looks great in normal view, but when I resize the browser window to a smaller width, the menu ends up overflowing below the main content. I want the navigation menu to always dis ...

htmlcss

specific css styles only for Safari and Internet Explorer

Imagine a scenario where I have a div with the class 'x': <div class = 'x' /> This div has some CSS properties and what's interesting is that it appears differently in Safari and the latest version of IE compared to other ...

javascriptjquerycss

The webpage on IE 9 is not aligning in the center

Everything seems to be working well in Chrome and IE 9 compatibility mode, but not in the actual IE 9 mode. The goal is to have the page centered. Check out the site here Any ideas on what could be causing this issue? ...

htmlcssinternet-explorer-9

Creating a CSS animation to repeat at regular intervals of time

Currently, I am animating an SVG element like this: .r1 { transform-box: fill-box; transform-origin: 50% 50%; animation-name: simpleRotation,xRotation; animation-delay: 0s, 2s; animation-duration: 2s; animation-iterat ...

javascriptcsssvgcss-animations

Lint error: Unrecognized attribute 'text-fill-color' in CSS (unknown properties)

My navigation bar isn't functioning, and I can't figure out why. It seems like it might be related to this snippet of code: -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: trans ...

cssvisual-studio-code

Step-by-step guide to displaying the dropdown menu button content at the top of the page in main.html by using the frameset tag

The layout of my main.html involves displaying menu.htm and welcome.htm using frameset. One issue that arises is with the drop-down menu buttons "Admin..." and "Scheduler...". When hovering over these buttons, the dropdown content does not display properly ...

javascripthtmlcss