I am facing a challenge with an iframe on my webpage, as it appears in letterbox shape. My goal is to make it fill the page vertically while maintaining the horizontal size at 60% with sidebars on the left and right.
Currently, I have achieved this in Chrome but not in Firefox. My aim is for it to work seamlessly across all modern browsers without relying on JavaScript.
The CSS code that works in Chrome but not in Firefox:
iframe, .menu, .main{
height: 100%;
}
A quick fix using CSS which is dependent on screen size:
iframe, .menu, .main{
height: 100em;
}
Here is the HTML structure of the page:
<!DOCTYPE HTML >
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style/s.css"/>
</head>
<body>
<header>
<h1></h1>
</header>
<div class="group">
<div class="menu">
<iframe src="menu">
Your user agent does not support frames or is currently configured not to display frames. However, you may visit
<a href="menu">the index here</a>
</iframe>
</div>
<div class="main">
<iframe src="main">
Your user agent does not support frames or is currently configured not to display frames. However, you may visit
<a href="main">the content here</a>
</iframe>
</div>
<aside>
<p>hello side</p>
</aside>
</div>
<footer>
<p>hello footer</p>
</footer>
</body>
</html>
And here is the CSS styling applied to the page:
/*background colour*/
header,
.menu,
.main,
section,
aside,
footer {
background-color: #eee;
border: 1px solid #888;
}
/*layout*/
footer {
clear: both;
}
header,
footer {
padding: 0;
width: 100%;
}
.menu,
.main,
section
aside
footer {
padding: 0;
margin: 0;
}
body,
.group {
margin-top: 0;
margin-bottom: 0;
}
iframe {
width : 100%;
border: 0;
}
iframe, .menu, .main {
height: 100%;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
/*default*/
/*side at bottom on non wide screen*/
aside {
clear: both;
}
/*if wide enough put menu on left side*/
@media all and (min-width: 1040px) {
.menu {
width: 24.9%;
float: left;
}
.main,
section {
width: 75%;
float: left;
}
}
/*wide screen — all side by side*/
@media all and (min-width: 1200px) {
.menu {
width: 17%;
float: left
}
.main,
section {
width: 64%;
float: left;
}
aside {
width: 17%;
clear: none;
float: right;
}
}