Frage stellen
ich bastel da jetzt schon ne ganze weile rum und bin langsam am verzweifel. Ich habe eine Tabelle mit einer statischen Kopf und Fusszeile, der Rest der Seite sollte innerhalb eines Divs mit 100% Höhe scrollen. Der einizge Browser der das richtig interpretiert ist Chrome, IE und FF schieben den Inhalt nach unten
Mein Code sieht wie folgt aus:
- Code: Alles auswählen
<body>
<form id="form1" runat="server">
<table border="1" style="width: 100%; height: 100%;">
<tr>
<td class="tdCaption" height="22px">a</td>
<td class="tdCaption">a</td>
</tr>
<tr>
<td colspan="3" valign="top">
<div style="background-color: #0f0; height: 100%; overflow: auto; position: relative;">
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
b div<br>
</div>
</td>
</tr>
<tr>
<td align="left" class="tdCaption" height="10%" colspan="3" valign="bottom" width="100%"><%-- height="10%"--%>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top">c</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="tdCaption" height="22px">d</td>
<td class="tdCaption">d</td>
</tr>
</table>
</form>
</body>
und mein dazugehöriges CSS:
- Code: Alles auswählen
html, body, form
{
margin: 0px;
padding: 0px;
height: 100%;
}
.tdCaption
{
BORDER-RIGHT: #c0c0c0 1px solid;
BORDER-TOP: #ffffff 1px solid;
FONT-SIZE: 11px;
padding: 3px 3px 3px 3px;
BORDER-LEFT: #ffffff 1px solid;
BORDER-BOTTOM: #b0b0b0 1px solid;
FONT-FAMILY: Arial;
font-weight:bold;
BACKGROUND-COLOR: #f00;
}
Im Anhang habe ich noch Screenshots vom Ergebnis angefügt, es sollte bei allen Browsern so aussehen wie bei chrome.
Über tipps wäre ich dankbar vielleicht seh ich ja vor lauter Bäumen den Wald nicht
LG Dirk
