Hallo,
ich hab ein kleines Problem welches aber schon eine große Menge an Zeit gekostet hat, und vor allem Nerven.
Ich habe eine Seite welche einen Header hat, darunter einen zweiten Header mit Buttons, dann links eine Navi und der Platz rechts unten soll ausgefüllt werden mit einem Div, welches bei Übergröße Scroll-Balken anzeigen soll.
Diesem Div hab ich Width 100% und Height 100% gegeben um den restlichen Platz auszufüllen. Funktioniert aber nicht. Wenn ich das Div ganz alleine anzeige geht es perfekt, sobald aber Header oder Navi hinzukommen wird das Div viel größer. Je nach Browser ist der Effekt unterschiedlich.
Hier mal Code:
Ich habs jetzt mal so weit wies geht zusammengekürzt. Ich hoffe Ihr könnt mir helfen.
Gruß Alex
ich hab ein kleines Problem welches aber schon eine große Menge an Zeit gekostet hat, und vor allem Nerven.
Ich habe eine Seite welche einen Header hat, darunter einen zweiten Header mit Buttons, dann links eine Navi und der Platz rechts unten soll ausgefüllt werden mit einem Div, welches bei Übergröße Scroll-Balken anzeigen soll.
Diesem Div hab ich Width 100% und Height 100% gegeben um den restlichen Platz auszufüllen. Funktioniert aber nicht. Wenn ich das Div ganz alleine anzeige geht es perfekt, sobald aber Header oder Navi hinzukommen wird das Div viel größer. Je nach Browser ist der Effekt unterschiedlich.
Hier mal Code:
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Schnitzel mit Pommes</title>
<style type="text/css">
* { margin: 0;padding: 0; }
html {
height: 100%;
margin: 0px;
padding: 0px;
}
body {
height: 100%;
margin: 0px;
padding: 10px;
}
.maindiv {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.header {
background-color: #98fb98;
border: 1px solid black;
width: 100%;
height: 150px;
margin: 0;
padding: 0px;
}
.th {
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px;
border-style: solid;
border-color: black;
white-space: nowrap;
}
.td {
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px;
border-style: solid;
border-color: black;
white-space: nowrap;
}
.reset {
margin-left: 30px;
}
.tree {
float: left;
width: 130px;
border: 1px solid;
}
.tablediv {
margin-left: 150px;
height: 100%;
width: 100%;
overflow:auto;
}
</style>
</head>
<body>
<div class="maindiv">
<div class="header">
<h1 style="float: left; margin-left: 10px;">Schnitzel mit Pommes</h1>
<div style="float: right; margin-right: 10px;">
<!-- Hier ist normalerweise eine Tabelle welche nach rechts gefloatet ist.-->
</div>
</div>
<div style="margin-top: 10px; margin-bottom: 20px;">
<!--Hier der zweite Header mit einigen Buttons.-->
</div>
<div class="tree">
<!--Hier die Navi aus einer Tabelle. Gefloatet nach links.-->
</div>
<div class="tablediv">
<div style="height: 100%;">
<!--Das hier soll den restlichen Bildschirm rechts neben der Navi und unterhalb des Header ausfüllen
und notfalls Scrollbalken anzeigen (Horizontal und Vertikal je nachdem was nötig ist).-->
</div>
</div>
</div>
</body>
</html>Ich habs jetzt mal so weit wies geht zusammengekürzt. Ich hoffe Ihr könnt mir helfen.
Gruß Alex
