nicht angemeldet
div mit "overllow auto" immer bis zum unteren Rand ausrichten
Hallo,
ich schlage mich seit ein paar Tagen mit folgendem Problem herum.
Ich habe ein div "Artistas" das mit overflow auto ausgestattet ist und max Height.
Soweit so gut. Was ich nicht hinbekomme ist dass das div immer nur bis zum unteren Rand ausläuft. Sobald ich die Höhe auf Auto setze wird das div bis zum ende angezeigt und der scrollbalken verschwindet natürlich.
Ich hab es schon mit einem Wrapper, mit einem 1 px hoehen footer usw. probiert. Nichts klappt. Wie bekomme ich es hin dass das Div immer nur bis zum unteren Rabd geht?
Die Seite: http://www.cafetindelsur.de/eltaller/artistas.html
Vielen Dank für jede Hilfe, Michael
-
Moin
Soweit so gut. Was ich nicht hinbekomme ist dass das div immer nur bis zum unteren Rand ausläuft. Sobald ich die Höhe auf Auto setze wird das div bis zum ende angezeigt und der scrollbalken verschwindet natürlich.
Ich hab es schon mit einem Wrapper, mit einem 1 px hoehen footer usw. probiert. Nichts klappt. Wie bekomme ich es hin dass das Div immer nur bis zum unteren Rabd geht?Scrollbalken werden für einen Div der die Eigenschaft Overflow:auto besitzt nur bei absoluten Pixelangaben für die Höhe und Breite angezeigt. Dies funktioniert nicht mit %-Angaben oder mit Auto-Angaben!
Du musst ein Hack mit Javascript schreiben, welches die die verfügbare Höhe aus der Fensterhöhe abzüglich bestehender Elemente berechnet. Wenn du via JS die errechnete Höhe dann setzt funktioniert auch overflow:auto wieder.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Hallo Bobby
Scrollbalken werden für einen Div der die Eigenschaft Overflow:auto besitzt nur bei absoluten Pixelangaben für die Höhe und Breite angezeigt. Dies funktioniert nicht mit %-Angaben oder mit Auto-Angaben!
Wie kommst du darauf, dass overflow:auto bei prozentualen Angaben nicht funktioniert?
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Moin
ich revediere mich. Es funktioniert ja doch. Ich hatte aber schon einen Fall wo es nicht funktioniert hat. Das müssen dann besondere Konstellationen sein. Da muss ich direkt nochmal nachschlagen um das Beispiel rauszusuchen.
Also sorry nochmal.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Moin
Folgende funktioniert nur mit JS-Hack:
css:
html
{
height:100%
}html, body
{
background: url("../images/hg_body.gif") repeat-x #FFF;
width:100%;
min-height:100%;
margin:0px;
padding:0px;
font-family:Tahoma;
font-size:11px;
text-align:left;
color:#333;
position:relative;
text-align:center;
line-height:16px;
}#container
{
width:990px;
margin:auto;
height:100%;
position:relative;
}#top
{
height:250px;
}#content
{
float:left;
text-align:left;
padding-left:20px;
width:600px;
padding-bottom:85px;
height:auto;
overflow:auto;
}#right
{
float:left;
width:200px;
padding-left:10px;
padding-bottom:65px;
}#footer
{
background:#9bc937;
height:66px;
width:100%;
position:absolute;
bottom:0px;
left:0px;
text-align:center;
}HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
xml:lang="de" >
<head>
</head>
<body>
<div id="container">
<div id="top">
</div>
<div id="content">
Hier der Inhalt
</div>
<div id="right">
</div>
<br class="clr"/>
</div>
<div id="footer">
</div>
</body>
</html>Also wenn du mir sagst wie es ohne HAck bei diesem Beispiel funktioniert wäre ich sehr dankbar.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Moin
Noch ein Beispiel wo es nicht funktioniert:
<html>
<head>
</head>
<body>
<div style="height:100%">
<div style="height:200px">
top
</div>
<div style="height:100%;overflow:auto;background-color:green">
<!-- Dieser Div sollte Scrollbar sein aber nicht länger als die verfügbare Höhe. Hier müsste die verfügbare Größe mit JS berechnet werden um eine absolute Pixelzahl zu haben und den DIV über den rets der Seite ersterecken zu lassen.--></div>
</div>
</body>
</html>Für Lösungen bin ich wie gesagt sehr gern offen.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Hallo Bobby
Für Lösungen bin ich wie gesagt sehr gern offen.
Schau dir mal die Beispiele an.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Vielen dank für die vielen Anregungen und Kommentare.
Ich hab letztendlich auf diese Lösung http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm zugegriffen da sie auch mit dem IE 6 funktioniert. Hier in Argentinien noch mehr verbreitet als anderswo. Zu sehen hier auf eine ähnliche Seite angewendet: http://www.cafetindelsur.de/eltaller/rojoestoy.htmlSaludos aus San Miguel de Tucuman, Michael
-
-
-
Hallo Bobby
Also wenn du mir sagst wie es ohne HAck bei diesem Beispiel funktioniert wäre ich sehr dankbar.
Wie es ohne JS in deinem Beispiel funktionieren könnte, kann ich dir auf die Schnelle nicht schreiben.
Das Problem bei deinem Beispiel besteht aber nicht darin, das overflow:auto bei prozentualen Angaben eventuell nicht funktioniert, sondern darin, dass sich die prozentuale Höhe eines Elements nur auf die angegebene Höhe des Elternelements bezieht und nicht auf die Minimal- oder Maximalhöhe.html { height:100%; } body { min-height:100%; } div { height:100%; } ~~~funktioniert nicht, egal ob du nun overflow:auto verwendest, oder nur den Hintergrund des divs bis zum unteren Fensterrand haben willst. Auf Wiederlesen Detlef -- - Wissen ist gut - Können ist besser - aber das Beste und Interessanteste ist der Weg dahin!-
Moin
html {
height:100%;
}
body {
min-height:100%;
}
div {
height:100%;
}Wie meinst du das? Ist aus nem aktuelle Beispiel und funktioniert wunderbar. Erklär mal bitt ewas du meinst? Gruß Bobby -- -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ## Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Moin
Position:absolute für das Div was scrollbar sein soll. Das ist die Lösung. Herztlichen Dank. Das merke ich mir. Man lernt nie aus.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
## Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:) -
Hallo Bobby
Wie meinst du das? Ist aus nem aktuelle Beispiel und funktioniert wunderbar. Erklär mal bitt ewas du meinst?
Dann erweitere mal:
div { height:100%; background-color:red; }In welchem Browser ist dann das rote Div wie hoch?
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-
-
-
-
Hallo Michael
Soweit so gut. Was ich nicht hinbekomme ist dass das div immer nur bis zum unteren Rand ausläuft.
Das ist auch ein Problem, weil sich prozentuale Angaben immer auf die (angegebenen) Größe des Elternelements beziehen.
Sobald ich die Höhe auf Auto setze wird das div bis zum ende angezeigt und der scrollbalken verschwindet natürlich.
Natürlich, denn height:auto bedeutet, genau so hoch, wie der Inhalt es erfordert.
Die Seite: http://www.cafetindelsur.de/eltaller/artistas.html
Ich weiß nicht, ob du unbedingt den inneren Scrollbalken willst, oder du lediglich Wert auf die fixierten Seitenteile legst.
Je nachdem, vielleicht kannst du dir Anregungen bei Fixe Bereiche mit CSS-basierten Layouts, Footer aller Art - feststehende Elemente realisieren oder bei diesen Beispielen (Beispiel 1, Beispiel 2) holen.
Sie stammen aus Fixer Bereich und height:100% und Navigation mit Scrollbalken.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
also der innere Scrollbalken muss nicht umbedingt sein. Ich wäre auch mit einer Lösung zufrieden wo kinke Navigationsleiste und Header fixiert sind. Wobei ich in dem fall auch den Titel "Artistas" als teil des headers anlegen könnte.
Danke ürigens für die schnelle Antwort.-
Hallo Michael
also der innere Scrollbalken muss nicht umbedingt sein. Ich wäre auch mit einer Lösung zufrieden wo kinke Navigationsleiste und Header fixiert sind.
Dann empfehle ich dir, dich mit dem Kapitel Fixe Bereiche mit CSS-basierten Layouts und dem Artikel Footer aller Art - feststehende Elemente realisieren zu beschäftigen. Dort ist es anhand von Beispielen gut erklärt, so dass du es auch für deine Seite anwenden könntest.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-