Issue
top.html
----------------------------------------------------------------------------------
^
|
main.html V
----------------------------------------------------------------------------------
I have a page which has two iframes. top.html takes up about 50px at the top and main.html below that is supposed to take up the rest of the page. i.e. just below the top iframe.
When the content in the bottom iframe goes beyond the screen I need a scroll bar. The scroll bar shows up fine but it doesnt show all of the content. In the example below, I have forced extra content to force the scroll bar but the Save button at the bottom of the page doesn't show up even when scrolling.
The files involved are:
index.html
<HTML style="overflow-y:hidden">
<TITLE>Main Page</TITLE>
<HEAD>
<style>
html,
body,
* {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
border: none;
border-collapse: collapse;
}
.top {
padding:0;
margin: auto;
width: 100%;
border-collapse: collapse;
border: none;
}
.bottom {
position: absolute;
float: left;
top: 50px;
width: 100%;
bottom: 0;
border-top: 1px solid #ccc;
border-right: none;
border-bottom: none;
border-left: none;
border-collapse: collapse;
}
.contentframe {
border-collapse: collapse;
border: none;
bottom: 0;
left: 0;
margin-right: 0px;
position: absolute;
}
</style>
</HEAD>
<BODY>
<div>
<iframe class="top" name="topmenu" src="top.html"></iframe>
</div>
<div class="bottom">
<iframe class="contentframe" style="width:100%;" frameBorder="0" name="body" src="main.html" frameborder="0"
scrolling="yes"></iframe>
</div>
</BODY>
</HTML>
top.html
<html>
<head>
<style>
.topbar {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
border: none;
height: 50px;
max-height: 50px;
min-height: 50px;
width: 100%;
}
.logo {
padding-left: 30px;
padding-right: 60px;
vertical-align: middle;
background-color: #1776BF;
height: 50px;
}
</style>
</head>
<body class="topbar" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<table cellspacing=0 cellpadding=0 width=100%>
<tr>
<td>
<table height=14 width=100% cellspacing=0>
<tr>
<td class="logo">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
main.html
<html style="overflow-y:auto">
<head>
<title>Config Page</title>
</head>
<body>
<div>
<b>Title</b>
</div>
<div id="formContainer" style="border:1px solid red">
<form id="config" method="post">
<div style="border:1px dotted green">
Line 1<br>
Line 2<br>
Line 3<br>
Line 4<br>
Line 5<br>
Line 6<br>
Line 7<br>
Line 8<br>
Line 9<br>
Line 10<br>
Line 11<br>
Line 12<br>
Line 13<br>
Line 14<br>
Line 15<br>
Line 16<br>
Line 17<br>
Line 18<br>
Line 19<br>
Line 20<br>
Line 21<br>
Line 22<br>
Line 23<br>
Line 24<br>
Line 25<br>
Line 26<br>
Line 27<br>
Line 28<br>
Line 29<br>
Line 30<br>
Line 31<br>
Line 32<br>
Line 33<br>
Line 34<br>
Line 35<br>
Line 36<br>
Line 37<br>
Line 38<br>
Line 39<br>
Line 40<br>
Line 41<br>
Line 42<br>
Line 43<br>
Line 44<br>
Line 45<br>
Line 46<br>
Line 47<br>
Line 48<br>
Line 49<br>
Line 50<br>
Line 51<br>
Line 52<br>
Line 53<br>
Line 54<br>
Line 55<br>
Line 56<br>
Line 57<br>
Line 58<br>
Line 59<br>
Line 60<br>
Line 61<br>
Line 62<br>
Line 63<br>
Line 64<br>
Line 65<br>
Line 66<br>
Line 67<br>
Line 68<br>
Line 69<br>
Line 70<br>
</div>
<br>
<button id="submitButton" type="submit">Save</button>
</form>
</div>
</body>
</html>
Solution
Simplify your index.html
<!doctype html>
<html>
<head>
<style>
body {
margin: 0;
display: grid;
grid-template-rows: 50px 1fr;
}
iframe {
width: 100%;
height: 100%;
border: 0;
}
</style>
</head>
<body>
<iframe src="top.html"></iframe>
<iframe src="main.html" scrolling="yes"></iframe>
</body>
</html>
Answered By - Brett Donald
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.