Menu
Consider the following code:
<html>
<head>
<style>
html {height:100%;}
body {margin:0;}
iframe {height:100%;border:1px dotted red;}
.hdr {min-width:765px}
.logo_left {margin:4px}
.logo_right {float:right;margin:4px}
.menu {float:left;width:175px}
</style>
</head>
<body>
<div class="hdr">
<img class="logo_left" src="img.png">
<img class="logo_right" src="img2.png">
</div>
<iframe class="menu" src="/menu.shtm"></iframe>
<iframe class="content" src="/home.htm"></iframe>
</body>
</html>
From the above code, I have a header that has a minimum width and can grow as the browser window grows or shrinks in width. Underneath the header, I have a fixed width iframe that can grow in height, but is fixed on the left and immediately under the header.
My problem is with the content iframe element. What I need is for the top and left edges to be fixed in place and the right and bottom edges to grow and shrink with the browser. I can't find a way to do this.
I've read through numerous questions with good answers on here and many of them tend to work with div tags. Is there a way that I can get my content iframe to layout the way I desire, strictly using CSS and HTML attributes. In my case, I can't use JavaScript, so that isn't an option.
Also, I'd prefer to stay away from setting width and the height of the iframe to a percentage. The existence of the header and the left-hand menu throw off the positioning. If there is away around this limitation, I am open to suggestions.
As you can see from the code, I am setting the height of both iframe elements to 100%. This means that these iframe elements always size beyond the lower bounds of the browser, equal to the height of my header. This is an annoyance but I can live with it. What I really need is to fix the edges of my content iframe to the corresponding edges of the header, menu and browser window. Can this be done?
535
You could wrap divs around your iframes and absolutely position those divs to the bottom, top and sides that you need.
Like so:
http://jsfiddle.net/wKHVz/
<html>
<head>
<style>
html {height:100%;}
body {margin:0; min-height: 100%; position: relative;}
.menuIframe, .contentIframe {width: 100%; height: 100%; border: none; }
.menuIframe {background: #ff9999; }
.contentIframe {background: #99ff99; }
.logo_left {float: left; margin:4px}
.logo_right {float:right; margin:4px}
.menu {position: absolute; top: 50px; left: 0px; bottom: 0px; width:175px}
.content {position: absolute; top: 50px; left: 175px; bottom: 0px; right: 0px;}
</style>
</head>
<body>
<div class="hdr">
<img class="logo_left" src="img.png">
<img class="logo_right" src="img2.png">
</div>
<div class="menu"><iframe class="menuIframe" src="/menu.shtm"></iframe></div>
<div class="content"><iframe class="contentIframe" src="/home.htm"></iframe></div>
</body>
</html>
In this example I have given 50px room for your header, but you could change this to whatever size header you need. Just change the top value of both of the iframes.
179
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
