nicht angemeldet
Hallo Leute,
habe Probleme bei meinem Interface-Layout.
Wichtig hierbei ist mir, dass das Content-Div sich automatisch bis an den Browserrand ausweitet, sozusagen immer die komplette zu Verfügung stehende Browsergröße ausnutzt. Übergroße Inhalte sollen mittels overflow:auto in content-Div scrollbar sein (Geht ja schon).
Igendwie habe ich allerdings Scrollbars im Hauptfenster/Browser selbst. Wie bekomme ich diese weg? (overflow: hidden im body ist hier natürlich nicht gut, da dann ein Teil des content-Divs abgeschnitten wäre.)
Und im IE rutscht das ganze Content-Div irgendwie unter das Menü??
[CODE]
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<style type="text/css"><!--
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#HeaderDiv {
height: 45px;
background-color: green;
}
#HeaderInfoDiv {
background-color: red;
float: right;
height: 45px;
}
#ContentDiv {
clear: none;
overflow: auto;
border: 1px solid black;
width: 100%;
height: 100%;
}
#MenuDiv {
float: left;
background-color: blue;
width: 145px;
height: 100%;
}
table {
width: 800px;
}
//--></style>
<title>Div Layout mit overflow</title>
</head>
<body>
<div id="HeaderInfoDiv">
HeaderInfoDiv
</div>
<div id="HeaderDiv">
HeaderDiv
</div>
<div id="MenuDiv">
MenuDiv<br/>
MenuDiv
</div>
<div id="ContentDiv">
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</body>
</html>
[/CODE]