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

Images displayed using jQuery do not fade into view

I have a collection of JSON image URLs that I am using to populate a div with a variety of images. Initially, the images are set at opacity 0 and should gradually fade in through a for loop. Here is the jQuery code snippet: $.ajax('http://example.co ...

jqueryhtmlcss

Issues with margin and padding-top not functioning properly when using @media for printing

Is there a way to add some space between the top of my webpage and my logo? I've tried adjusting the padding in my CSS, but when I check the print preview in Chrome, no spacing is visible. Below is my HTML code: <div class="container"> < ...

htmlcssmarginpaddingspacing

The CSS 'top' attribute is without impact

As I begin my journey with CSS, I am eager to grasp some of its behaviors. In the CSS file, the following code is defined: #spa { position : absolute; top : 8px; left : 8px; bottom : 8px; right : 8px; min-height : 500px; min-width : 500px ...

htmlcss

Choosing several buttons in typescript is a skill that every programmer must possess

I need help with selecting multiple buttons in TypeScript. The code I tried doesn't seem to be working, so how can I achieve this? var input = document.getElementById('input'); var result = document.getElementById('result'); v ...

javascripthtmlcsstypescript

Tips on utilizing browser scroll for horizontal overflow of internal div?

I'm working on creating a dynamic page with a tree-like structure that easily exceeds the width of the browser window. My goal is to enable horizontal scrolling for the entire page using the browser's scrollbar, without needing a separate scrollb ...

javascripthtmlcss

Changing color of entire SVG image: a step-by-step guide

Check out this SVG image I found: https://jsfiddle.net/hey0qvgk/3/ <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" width="90" height="9 ...

javascripthtmlcsssvg

Exploring the theme color options in Angular Material

Despite extensive searching on SO and GitHub, I am seeking clarification: Is it impossible to access a theme color (or any other theme feature) in order to set a mat-card color? There is no way to retrieve a variable in scss. You cannot assign a class to ...

cssangularangular-material

Menu stack with content displayed to the right on larger screens

Given the content div's position (up middle), what method can I use to stack the divs in this manner? Is it possible to accomplish with only CSS or is jQuery necessary to move the div content out on larger screens? ...

htmlcsstwitter-bootstrap

I find myself struggling to manage my javascript dependencies

Currently, I am utilizing NPM along with various angular packages. As per the tutorial on Basic Grid Part 1 at this link, I am encountering challenges. This is my file directory structure: D:/nodeStuff/uiGrid includes: node_modules uigrid.css uigrid.h ...

javascripthtmlcssangularjsnpm

Menu Items at the Center

I am currently working on a Wordpress website and struggling to center the menu items that are currently aligned to the left. I have created a child theme from the existing theme's code, but still can't figure out how to achieve this simple task. ...

csswordpressmenuhtml-listsnav

Zooming in on the background with an animated effect

I'm experimenting with a zoom in animation on a background image for a brief moment. It seems to work initially but then resets itself. To see an example, I've created a jsfiddle link: https://jsfiddle.net/onlinesolution/tk6rcLdx/ Any idea what ...

csscss-transitionscss-animations

Class-driven dynamic CSS

Recently, I came across a JSP code snippet that looks like this: <table id="mytable" cellspacing="0"> <tr data-depth="0" class="collapse level0"> <td></td> <td></td> <td></td> </tr> ////... /...// < ...

htmlcssjsp

What method can I use to adjust the font style when it overlays an image?

Sorry if this is a bit unclear, but I'm trying to figure out how to change only a section of my font when it overlaps with an image while scrolling. If you visit this example website, you'll see what I'm referring to: For a visual represen ...

javascripthtmlcsstypography

(CSS) Unusual phantom white outline surrounding menu with no visible border

I've just finished creating my first multi-level drop-down menu, but I'm encountering two white border issues. The first white border appears at the bottom of the menu and seems to be related to the padding of the a-elements. The specific area in ...

htmlcssmenu

Is there a way to apply CSS styles to a specific word within a div that corresponds to the word entered in the search box?

Using a searchbox, you can enter words to find pages with the searched-for word in the page description. If the word is found in the description, a link to the page along with the highlighted word will be displayed. However, I am encountering an issue wher ...

jqueryhtmlcss

Is there a way to format wrapped lines with indentation in an unordered list?

Is there a way to indent the wrapped lines of text in an unordered list? The current layout is not quite what I want, as shown in the first image below. Ideally, I would like it to look more like the second image. I attempted to use margin-left: 56px; and ...

javascriptjqueryhtmlcssword-wrap

Troubleshooting issues with CSS dropdown menu in Internet Explorer and Chrome

I am encountering an issue with my dropdown menu not functioning properly in Internet Explorer 10, Chrome, and compatibility mode. Surprisingly, it works flawlessly in the latest version of Firefox. CSS: #menu_items { float: left; width: 600px; } #me ...

htmlcsswebkitgecko

Is there a method to change the name of a file and have it automatically updated in all other locations where it is referenced?

I need to change the name of an HTML file within Visual Studio Code, but this file is referenced in multiple other files. Is there a quick way to do this? Are there any shortcuts that will let me rename the file and automatically update all references in ...

htmlcssvisual-studiokeyboard-shortcutsshortcut

Connect PHP code to an HTML document

Recently, I created an entry form login page saved as a .php file which displays content in html and css. The page showcases various elements followed by a login form with two fields: Username, Password, and a 'Log in' button. Additionally, I ha ...

phphtmlcssxampp

The button is positioned at the bottom right within a div surrounded by text that flows around it seamlessly

Image Is there a way to position a button in the bottom right corner of a div with a fixed height that is filled with text where the text flows around the button? I have attempted using "float" and positioning the button, but I have not had any success. ...

htmlcss