Make Iframe to fit 100% of container's remaining height

html

responsive-design

css-layout

flexbox

byAnton Shumikhin·Dec 30, 2024

You wish to make your iframe occupy all remaining height of its parent container? Set height: 100% on the iframe, alongside positioning it absolutely. Spacing concerns? Reset all (border, padding, margin) to zero. Let's get into it, one CSS block at a time:

.container {
    /* The ring to rule them all, now this container enables the iframe */
    position: relative;
    height: 500px;
}

iframe {
    /* The prized space-taker! */
    position: absolute;
    height: 100%;
    width: 100%; /* A sight for sore eyes, a full-width iframe */
    /* Goodbye border, you won't be missed. */
    border: 0;
    padding: 0; /* Padding? No, thank you! */
    margin: 0; /* Margin? We don't do that here */
}

Pair this CSS with your HTML:

<div class="container">
    <iframe src="example.html"></iframe>
</div>

This constellation ensures an iframe covering entire vertical space within a container.

CSS Layout Techniques: The Good, The Bad, The Ugly

Evolving CSS techniques give us different ways to make an iframe fit within a container's height. Let's explore flexbox, positioning, and tables.

Flexbox: The Guardian of the Layout Galaxy

The mighty Flexbox is an excellent tool for this use-case. It brings with it the flexibility of dynamic resizing, sans any Javascript baggage. Let's code:

.container {
    display: flex; 
    flex-direction: column;
    height: 500px; /* Without a height, the container is just... floating. Not cool! */
}

.content {
    /* The Content. Immovable. Unchanged. */
    flex: 0 0 auto;
}

iframe {
    /* The hero we deserve */
    flex: 1;
    width: 100%; 
    border: none;
}

Containing Block: Understanding the Layout Matrix

CSS has a concept called the "containing block". It is the space in which the iframe lives and maneuvers. If we set height: 100% on an element, it refers to 100% of its containing block's height, not the viewport.

When Height: 100% bites back

Just setting height: 100% on iframe doesn't work. You must ensure all ancestors up to and including html and body also have heights set to 100%:

html, body { height: 100%; } /* We're in matrix now! */

Avoiding the Quirk Side of the Force

Always start your HTML with <!DOCTYPE html> to activate standards mode, unless you enjoy quirky (read: inconsistent) browser interpretations of height: 100%.

Say No to Scrollbars: Responsiveness and Iframes

Responsiveness is a critical aspect of modern web development. But pesky scrollbars can make it difficult. Yep, we’re looking at you, Mr. iframe. Here's a slick solution:

Using the Force (of Fixed Positioning) for a Responsive Jedi

When crafting a responsive design with a header and an iframe that takes up the remaining viewport, position: fixed can come handy:

.container {
    position: fixed;
    top: 50px; /* Presumably giving room to a 50px header */
    left: 0; /* Like a good citizen, we start from the beginning */
    right: 0; /* And end at the very end */
    bottom: 0; /* And no, we don't do half measures */
}

iframe {
    width: 100%;
    height: 100%;
    border: none; /* *snaps* This border's gone */
}

The iframe manages to hold its full-height position, resisting the temptation of jumping around during scrolling, thereby dynamically fitting the viewport.

Handling Iframe like a Pro

Gaining a firm grasp of viewport-container relationships and comic nature of CSS layouts can help you slay layout challenges like a pro. Here are some best practices:

Borders: Thanos-snapped from Iframe Existence

Help yourself to a cleaner layout by snapping away the default iframe border:

iframe { border: none; } /* And just like that... *snap*... it's gone */

Calc() function: Doctor Strange's Precise Spells

Account for headers or banners by calculating the exact height for iframes:

iframe {
    height: calc(100% - 50px); /* Say you have a header of 50px height */
}

Flexbox: The Hulk-strength for Dynamic Height Issues

When dealing with fluid content height, flexbox offers a clean and efficient solution:

.container {
  display: flex;
  flex-direction: column; /* Keep 'em well-ordered, vertically */
}

.banner {
  flex: 0 0 auto; /* This banner listens to no one */
}

iframe {
  flex: 1; /* Ah! The remaining space shall be mine! */
}

Keeping up with the (CSS) standards: The Avengers of modern layout

Flexbox is a trusted, up-to-date solution, as an accepted answer with numerous upvotes will tell you. It pays to keep your code aligned with the most current standards instead of leaning on outdated solutions or hefty Javascript-based workarounds.

explain-codes / Html / Make Iframe to fit 100% of container's remaining height

Linked

How can I combine flexbox and vertical scroll in a full-height app?



How can I have two fixed width columns with one flexible column in the center?



How to auto adjust the <div> height according to content in it?



Full-screen iframe with a height of 100%



Fill remaining vertical space - only CSS

