CODEWITHSUNDEEP
htmlcssiframe
user2766918
user2766918

Reputation: 584

html iframe does not reach bottom of window

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.

Upvotes: 3

Views: 1405

Answers (2)

andreas
andreas

Reputation: 16946

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>

Upvotes: 2

Andrei V
Andrei V

Reputation: 7496

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;
}

Upvotes: 1

Related Questions