Scrollbalken

Hi!

Ich habe in der Bildschirmmitte ein in seiner Breite fixes DIV-Element für meinen Seiteninhalt. Die Höhe ist passt sich dem Inhalt an. Nun würde ich gerne - wenn der Seiteninhalt über den unteren Bildschirmrand hinausgeht - einen vertikalen Scrollbalken einbasteln. Dieser soll aber auch wirklich nur sichtbar sein, wenn der Inhalt auch über den unteren Rand hinaus geht. Einen horizontalen Scrollbalken will ich nicht haben, Text soll also automatisch umgebrochen werden, wenn er die Breite des DIVs überschreitet.

Gibts dafür eine Lösung?

bei mir klappt das mit "overflow: auto;" im css immer.

hab ich schon versucht, aber da ändert sich nichts - sind also gar keine Scrollbalken zu sehen.

Hab jetzt rausgefunden, dass man den horizontalen Scrollbalken mit "overflow-x: hidden;" ausblenden kann - aber ne richtige Lösung is das auch net 🙁 ich verzweifel noch!

hoffe ihr könnt mir helfen

viele grüße,
melanie

melle schrieb

Ich habe in der Bildschirmmitte ein in seiner Breite fixes DIV-Element für meinen Seiteninhalt. Die Höhe ist passt sich dem Inhalt an. Nun würde ich gerne - wenn der Seiteninhalt über den unteren Bildschirmrand hinausgeht - einen vertikalen Scrollbalken einbasteln.

Wie soll das funktionieren?

Overflow macht nur Sinn bei Divs wo eine Höhe oder Breite eingestellt ist.
Ein Inhalt kann nicht über ein Div "hinausragen" wenn keine Höhe eingestellt ist da sich das Div ja automatisch seinem Inhalt anpasst.
Gibst du eine Höhe an - egal ob in Prozent oder Pixel - funktionierts auch mit dem "overflow: auto"!

"overflow-x" würde ich nicht benutzen da dies nur der IE, der Konqueror und Safari kennen!

ich habe nun eine fixe Höhe eingestellt, aber trotz overflow:auto klappt es nicht.

So schauts aus:

#Content		{ visibility: visible; 
		position: absolute; 
		z-index: 4; 
		top: 142px; 
		left: 180px; 
		width: 583px;
		max-width: 600px;
		height: 100%-142px;
                                overflow: auto;
                               }

Scrollbalken sind beim DIV keine zu sehen, es wird wie vorher auch schon der Standard-Browser-Scrollbalken angezeigt. Ne Idee warum das nicht geht?

LG melanie

glaub nicht dass das geht: height: 100%-142px;
nimm eher sowas mal height:400px;

lg georg

just2b schrieb

glaub nicht dass das geht: height: 100%-142px;

Das geht sogar sicher nicht.
*leider* - wäre schön - ist aber auch nicht im CSS3-Standard (soweit bisher ersichtlich) drin.

@melle:
Das sollte reichen für ein mittig positioniertes Div mit overflow:auto (aber eine dynamische Höhe bekommst du damit natürlich nicht!):

body {
	margin: 0;
	padding: 0; 
	background-color: #FFFFFF;}

#document {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 660px;
	height: 400px;
	margin-top: -200px;
	margin-left: -330px;
	overflow: auto;
	text-align: left;
	background-color: blue;
}

Wichtig ist dass der Doctype richtig gesetzt ist (egal ob XHTML oder valides HTML 4.0 - funktioniert beides) und du natürlich alles in ein DIV namens "document" schmeisst - logisch.
Ausserdem musst du natürlich die Margins deiner Breite/Höhe anpassen.

Habe ich gerade probiert.

Der Text wird im Content angezeigt und sauber umgebrochen. Wenn er die höhe sprengt erscheit ein Rollbalken.

<!-- ###DOKUMENT### begin -->
<div id="logo">###LOGO###</div>
<div id="schattenbox">
  <div id="navtop"><span>###NAVTOP###</span></div>
  <div id="content"><span>###CONTENT###</span></div>
</div>
<!-- ###DOKUMENT### end -->

Sie Schattenbox ist zentriert auf der Seite.

Das betreffende CSS für den Content ist.

#content {
height: 340px;
background-color: #F0F0F0;
overflow: auto;
}

Ist das die Lösung - hilft das weiter?