nicht angemeldet
Scrollbares Div automatische Größe mit overflow: auto
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]
-
Hallo,
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.
Das ist standard. bzw. brauchst und solltest du NICHT mit angeben.
Igendwie habe ich allerdings Scrollbars im Hauptfenster/Browser selbst. Wie bekomme ich diese weg?
OK, schauen wir mal in den Quelltext.
Und im IE rutscht das ganze Content-Div irgendwie unter das Menü??
Im FF auch :-(
[CODE]
Bitte die Sprche mit angeben. (code lang=html) aber in eckige Klammern.
<?xml version="1.0"?>
Hier durch schickst du den IE in den Quirks-Mode. Also sei vorsichtig mit dieser Angabe!
<!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"><!--
Du benutzt XHTML, also musst du den Kommentar UNBEDINGT entfernen, sonst ignorieren gescheite Browser den Stylesheet-Bereich.
[...]
#ContentDiv {
clear: none;
overflow: auto;
border: 1px solid black;
width: 100%;Das solltest du weglassen. 100%+2px erzeugt nunmal Scrollbalken.
//-->
Wofür stehen eigentlich die "//" in einer CSS-Datei? ;-) Weg damit.
mfg. Daniel
--
Experten raten von der Verwendung des Internet Explorers ab!
Diese Programme braucht man, um Webseiten zu bauen!
Mein SELF-stylesheet
Selfcode: ie:{ fl:| br:> va:| ls:# fo:| rl:( n4:# ss:{ de:> js:| ch:? mo:) zu:}-
Danke für deine Antwort Daniel.
Leider hilft mir das ncoh nicht weiter.
Die Scrollbars sind nach wie vor vorhanden und das Problem weiterhin ungelöst. An dem border: 1px liegt es nciht. Die Scrollbars werden viel mehr ausgedehnt als nur 2px.-
Hallo,
Die Scrollbars sind nach wie vor vorhanden und das Problem weiterhin ungelöst. An dem border: 1px liegt es nciht. Die Scrollbars werden viel mehr ausgedehnt als nur 2px.
Ja, weil du noch ein unnötiges width:100% hast.
Ich hab das mal entfernt.Zwar gibt's die Scrollbalken jetzt wieder eine Ebene tiefer, aber das wirst du schon selbst hinbekommen :-)
mfg. Daniel
--
Experten raten von der Verwendung des Internet Explorers ab!
Diese Programme braucht man, um Webseiten zu bauen!
Mein SELF-stylesheet
Selfcode: ie:{ fl:| br:> va:| ls:# fo:| rl:( n4:# ss:{ de:> js:| ch:? mo:) zu:}-
Also,
das Problem, dass das ContentDiv im IE nach unten gerutscht ist, beim verkleinern des Browserfensters habe ich jetzt mit position: absolute; gelöst:#ContentDiv {
position: absolute;
Top: 45px;
Left: 150px;
clear: none;
overflow: auto;
border: 1px solid black;
height: 100%;
}Allerdings ist das keine gute Lösung, wenn die Navi ausgeblendet werden kann.
Die Scrollbars im Browser habe ich versucht mittels margin-bottom: -45px (in MenuDiv,ContentDiv) wegzubekommen. Warum auch immer, es hat nicht funktioniert.
-
Hallo unclesam,
ich hab irgendwie das Gefühl, dass dein Layout so nicht realisierbar ist. Du könntest höchstens alles in % angeben, was aber wahrscheinlich wieder andere Probleme mit sich bringen wird.
Ich würde mir an deiner Stelle jetzt wohl die Frage stellen:
muss denn wirklich alles über die ganze Fensterhöhe gehen und seperat scrollbar sein?Ich meine, was spricht dagegen, dass die Navi so hoch wie ihr Inhalt ist? Das gleiche gilt für den Content.
Ansonsten könntest du mit einer Layouttabelle (die man nunmal lieber vermeiden sollte), alles in etwa auf die gleiche Höhe bringen. Dann würde man halt alles auf einmal scrollen, was doch aber nicht soo schlimm ist oder?Außerden wollen die meisten Anwender (glaube ich) nicht mehrere Scrollbalken in einem Fenster.
mfg. Daniel
--
Experten raten von der Verwendung des Internet Explorers ab!
Diese Programme braucht man, um Webseiten zu bauen!
Mein SELF-stylesheet
Selfcode: ie:{ fl:| br:> va:| ls:# fo:| rl:( n4:# ss:{ de:> js:| ch:? mo:) zu:}-
Also die Navi ist mir eigentlich recht egal. Die Navi muss einfach nur da sein, wie hoch diese ist, ist egal.
Wichtig ist mir nur das ContentDiv, das es bis an den Browserrand geht, rechts sowie nach unten.
Das die User mehrere Scrollbars nicht mögen, denke ich auch, deswegen möchte ich ja auch nur das ContentDiv scrollbar haben. Dies ist für die geplante Anwendung wesentlich komfortabler als die Scrollbars im Browser.
Langsam denke ich auch, dass das Layout so nicht umsetzbar ist...
-
Hallo,
Wichtig ist mir nur das ContentDiv, das es bis an den Browserrand geht, rechts sowie nach unten.
Wenn du dein Layout ein wenig umstrukturieren würdest, also die Leiste, die du oben einfügen möchtest wegnimmst, lässt sich das Layout ganz einfach realisieren.
Eine andere Möglichkeit wäre, der oberen Leiste ebenfalls %-Werte zu geben (10%,90% oder so).
Nur leider zommt sich dann die Schrift darin nicht mit, deshalb würde das wahrscheinlich nicht so gut aussehen, wenn man die Fenstergröße ändert...Die ganze Breite zu verwenden, ist im übrigend kein Problem, da das bereits standardmäßig so ist (abzüglich der margins,borders und paddings).
Jedenfalls mit dem Box-Modell (CSS-Layout).mfg. Daniel
--
Experten raten von der Verwendung des Internet Explorers ab!
Diese Programme braucht man, um Webseiten zu bauen!
Mein SELF-stylesheet
Selfcode: ie:{ fl:| br:> va:| ls:# fo:| rl:( n4:# ss:{ de:> js:| ch:? mo:) zu:}
-
-
-
-
-
-