| 

.NET C# Java Javascript Exception

6
Hallo

Eltern Div ist relativ positioniert.
Dadrin sind 3 absolut positionierte Divs mit unterschiedlichen Höhen, anfangen tun sie alle aber an exakt der gleichen Stelle.
Es ist immer nur ein Div davon eingeblendet (wechselt per JavaScript).

Nun soll sich die Höhe vom übergeordneten Div aber immer automatisch der Höhe des absoluten Divs anpassen... ohne das ich eine feste Höhe angebe.

Jemand eine Idee?
Danke.
29.10.2012
meone 109 1 6
3 Antworten
1
So, wie Du es Dir vorstellst, geht es nicht. Absolut positionierte Elemente werden für die Berechnung der Größe ihres Containers nicht berücksichtigt, da beißt die Maus keinen Faden ab.

Choose your poison:

  • Auf floating und relative Positionierung ausweichen, siehe dazu z.B. diesen Thread bei stackoverflow.
  • Die Container-Höhe per Javascript berechnen und setzen. Auch darüber haben die Kollegen vom großen Vorbild schon mal geschrieben. So, wie Du den Kontext beschreibst, könnte das für Dich die passendste Lösung sein (da die Wechsel zwischen den divs und damit die Größenänderungen ohnehin per JS getriggert werden).
  • Doch irgendeine feste Größe für den Container setzen.
29.10.2012
Matthias Hlawatsch 13,2k 4 9
1
So lange keine Anderen Elemente dazwischenfunken sollte es reichen wenn Du die inneren Divs nicht absolut positionierst (einfach kein position im CSS angeben) und keine height für das äußere Div festlegst. Ggf. musst Du die nicht anzuzeigenden Divs noch via CSS ausblenden (display: none). Hab das eben in FF mit folgenden Code probiert

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de-DE" dir="ltr" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body class="container">

<div style="position: relative; background: red; padding: 10px; left: 30; top: 30;">
<div id="a" style="height: 200px; background: blue;" onclick="$('#a').hide();$('#b').show();">A</div>
<div id="b" style="height: 50px; background: green; display: none;" onclick="$('#b').hide();$('#c').show();">B</div>
<div id="c" style="height: 280px; background: yellow; display: none;" onclick="$('#c').hide();$('#a').show();">C</div>
</div>
<div style="background: silver;">
ASD
</div>
</body>
</html>


Solle es doch Probleme geben oder ein bestimmter Browser (für den ich grad keine VM starten will) rumzicken dann ergänze doch bitte ein Code-Beispiel für dein konkretes Problem.
29.10.2012
phg 1,6k 3
0
Mit JS berechnen ist mir soweit klar, hatte ich schon bei einem anderen Projekt so gemacht, finde ich aber ehr unschön.

@phg: So habe ich es aktuell erstmal gemacht, das Problem ist aber, dass Sie einfaden sollen. Und bevor der erste ganz raus ist, kommt der zweite ja schon rein (es soll dazwischen auch keine Pause sein wo man gar nichts sieht)... und in diesem kurzen Zeitraum rutschen Sie untereinander.

Und eine feste Größe kann ich nicht setzen, da ich sie nicht kenne... der Kunde ist für den Inhalt später zuständig.
30.10.2012
meone 109 1 6
Wenn das faden soll bleibt dir eigentlich nur absolut zu positionieren.
Du kannst mal für das äußere Div eine min-height angeben und vor dem Faden für ein oder beide Divs via JS position:absolute setzten und nach dem faden wieder entfernen. Dabei wird sich die Größe des äußeren Divs aber sprunghaft ändern... schön ist was anderes.

Ich würde in diesem Fall auch die Höhe mit JS berechnen und währen dem Faden der inneren Divs gleich noch die Höhe des äußeren Divs mit .animate({height:berechneteNeueGroesse}) anpassen.
phg 30.10.2012

Stelle deine Css-Frage jetzt!