Menu
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.
385
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>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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
