html iframe does not reach bottom of window

Question

I'm trying to create a web page with three horizontal sections — a header, a menu, and a content section. My problem is that when I do this, the bottom iframe does not come close to the bottom of the browser window. I'm wondering if anyone can tell me what I'm doing wrong. My HTML looks like:

<!DOCTYPE html>
<html>
<head>
<style> </style>
</head>
<body>
<iframe src="title.htm" width="100%" height=90 
    style=" position:absolute; 
            top:0; left:0; 
            border:1px solid grey;" 
    name="title_frame">
    <p>Your browser does not support iframes</p>
</iframe>
<iframe src="hmenu.htm" width="100%" height=70 
    style=" position:absolute; 
            top:90px; 
            left:0; 
            border:1px solid grey;
            margin:0px 0px 0px 0px;" 
    name="hmenu_frame">
</iframe>
<iframe src="startpage.htm" width="100%" height="100%"
    style=" position:relative; 
            top:160px;
            vertical-align:bottom;
            border:1px solid grey;"
    name="content_frame">
</iframe>
</body>
</html>

There are no CSS includes. I'm previewing using Chrome and the bottom of the last iframe is about halfway down the window. I've tried using absolute position, playing with height, and tried an vertical-align:bottom, but none of it seems to work.

Using iframes for different page sections is... not the best way. Why not simply use `
` tags? — andreas, Oct 31 '16 at 12:36
Thanks. I hadn't heard of sections before. I just did a quick lookup, and it doesn't seem that section supports an src attribute -- so if I click on a menu item, can the contents of the section be loaded without reloading the entire page? (note, there's some javascript running in the menu, so I'd prefer not to reload it unless absolutely necessary). — user2766918, Oct 31 '16 at 12:49
Ok, I see. With using sections you will have to use all your code in one html file – so reloading only one section with a menu item click will not work. See this question about if it is bad practice to use iframes: http://stackoverflow.com/questions/362730/are-iframes-considered-bad-practice — andreas, Oct 31 '16 at 12:53
Ok, after playing with this for a bit, I think I actually want to use iframes -- I'd like the header and menu to stay loaded, and to stay at the top of the screen when I scroll down in the content window. This is for a very specific site, which does not have any soe or security concerns, so these do not concern me. That leads me back to my original problem of why my iframe does not reach the bottom of the window... — user2766918, Nov 01 '16 at 00:45
Ok, after a bit more searching, I found [this](http://stackoverflow.com/questions/325273/make-iframe-to-fit-100-of-containers-remaining-height), which seems to work. — user2766918, Nov 01 '16 at 12:02

andreas · Answer 1 · 2016-10-31T12:51:50.380

Here is a simple solution using display: flex; and <section> tags instead of iframes. Width flex-direction: column; you make sure, that your content sections are displayed on top of each other, not in a row.

This way, you don't need all the positioning you are doing and your markup as well as your styles remain clean and simple.

html,
body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
section {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid grey;
}
.title {
  height: 90px;
}
.hmenu {
  height: 70px;
}
.content {
  height: 100%;
}

<section class="title">...</section>
<section class="hmenu">...</section>
<section class="content">...</section>

score 1 · Answer 2 · answered Oct 31 '16 at 12:38

1

I suggest changing a bit your approach. This can be easily achieved using flexbox. Please keep in mind that using iframes in your context is not really recommended. You can see the end result in this fiddle.

First, remove the relative and absolute positioning from your iframes. They are not needed. Next, set display: flex; flex-direction: column; on body. Because you're setting borders around (and because it could save you a lot of trouble down the road), add box-sizing: border-box; on your iframes.

html, body {  
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

iframe {
  box-sizing: border-box;
}

answered Oct 31 '16 at 12:38

Andrei V

7,306
6
44
64

You're the second person that said that iframes in the context is not recomended. Could you expand on that? (sorry, like I said, I'm new to this, and learning as I go -- I'd like to understand the reasoning). – user2766918 Oct 31 '16 at 12:51
1

You can find many resources on the internet regarding the use of `iframe`s. The biggest problem you'll hear about is security. Another reason, would be "semantics". You should try to use the best element which describes the content (that's why @Andreas recommended `sections`s). An `iframe` does not have any "meaning", it just "injects" code into your page. – Andrei V Oct 31 '16 at 12:57

html iframe does not reach bottom of window

2 Answers2