I have the following index.html
<!DOCTYPE html>
<html>
<header>
<style type="text/css">
html, body { margin: 0; padding: 0; }
#divlogo {
position:absolute;
top:10px;
}
#divIFrame {
position:absolute;
top:80px;
width:100%;
}
#myIFrame {
width: 100%;
border: 2px blue solid;
}
#divaudio {
position:absolute;
bottom:0px;
width:100%;
height:30px; /* Height of the footer */
overflow : hidden;
border: none; <!-- border: 2px red solid; -->
}
</style>
</header>
<body>
<div id="divlogo">
TOP
</div>
<div id="divIFrame">
<iframe id="myIFrame" src="content.html" name="main" ></iframe>
</div>
<div id="divaudio">
BOTTOM
</div>
</body>
</html>
and the following content of the iframe content.html
<!DOCTYPE html>
<html>
<header>
</header>
<body>
1<br/>
2<br/>
3<br/>
4<br/>
5<br/>
6<br/>
7<br/>
8<br/>
9<br/>
10<br/>
11<br/>
12<br/>
13<br/>
14<br/>
15<br/>
16<br/>
17<br/>
18<br/>
19<br/>
20<br/>
21<br/>
22<br/>
23<br/>
24<br/>
25<br/>
26<br/>
27<br/>
28<br/>
29<br/>
30<br/>
31<br/>
32<br/>
33<br/>
34<br/>
35<br/>
36<br/>
37<br/>
38<br/>
39<br/>
40<br/>
41<br/>
42<br/>
43<br/>
44<br/>
45<br/>
46<br/>
47<br/>
48<br/>
49<br/>
50<br/>
51<br/>
52<br/>
53<br/>
54<br/>
55<br/>
56<br/>
57<br/>
58<br/>
59<br/>
60<br/>
61<br/>
62<br/>
63<br/>
64<br/>
65<br/>
66<br/>
67<br/>
68<br/>
69<br/>
70<br/>
</body>
</html>
How can I set the CSS of iframe, so that if I resize the window,
so that the iframe is automatically adjust the HEIGHT
which means, the iframe does not overlay & not underlay the top and bottom elements.
The iframe
- starts after the top-Element and
- ends before the bottom-Element.
What is the correct CSS for this need?
Many Thx
