Witam wszystkich forumowiczów !
Mam poważny problem z okiełznaniem pewnego zadania. Mianowicie po zmniejszeniu okna przeglądarki internetowej scroll dolnego diva "ucieka po za ekran" a po odświeżeniu strony w tym małym rozmiarze scroll nabiera rozmiarów okna. Drugi zaś problem to ramka na górze (fioletowa), po dodaniu jakiejkolwiek zawartości do niej, ramka wchodzi na tego diva na dole. Czy mógłby mi ktoś przerobić ten kod żeby to działało tak jak ma być ? Proszę bardzo o pomoc.
Podaje kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<script language="javascript"> function GetHeight() {
var y = 0;
if (self.innerHeight) {
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
y = document.documentElement.clientHeight;
}
else if (document.body) {
y = document.body.clientHeight;
}
return y;
}
function Loaded() {
// alert("loaded");
var oHeaderPanel = document.getElementById("headerPanel");
var oPanel = document.getElementById("bodyPanel");
if (oPanel == null ||
oHeaderPanel == null) {
alert(oPanel == null);
alert(oHeaderPanel == null);
return;
}
var iNewHeight = GetHeight() - 200;
oPanel.setAttribute("style", oPanel.getAttribute("style") + "; height:" + iNewHeight + "px;");
}
body
{
color: black;
background-color: #FFFFFF;
}
.attachmentList
{
float:left;
list-style-type:none;
padding: 0;
margin: 0;
}
.attachmentListItem
{
float:left;
margin-right:10px;
}
.headerTable
{
width: 99%;
border-collapse:collapse;
background-color: #D0D0FF;
position: fixed;
}
td
{
border: solid 1px black;
}
.headerConstFields
{
width: 160px;
}
<body onload="Loaded();"> <table class="headerTable"> <td class="headerConstFields">From:
</td> <td class="headerConstFields">To:
</td> <td class="headerConstFields">CC:
</td> <td class="headerConstFields">BCC:
</td> <td class="headerConstFields">Date:
</td> <td class="headerConstFields">Title:
</td> <td class="headerConstFields">Attachments:
</td> <td>%attachmentList%
</td>
<div id="bodyPanel" style="position:fixed;top:220px; width:99%; height:80%; overflow:scroll;"> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <br>dasgjajjjjjjjjjjjjjjjjjjjjjjjjjjjj
</br> <div style="background:#F0F0B0;">%attachments%
</div>