✔ Nachgeladener JS-Content überlagert div

[Trash]

Moin,
ich habe auf meiner Seite einen Div-Wrapper, der alles zusammenhält und in diesem Div-Wrapper gibt es ein Menü, welches links platziert ist und rechts der Content. Wenn ich nun per JS einen bestimmten Teil an Content nachlade, der das div #content in seiner Höhe (100%) übersteigt, dann ragt der mit JS geladene Content über das #div content unten heraus. Die Höhe ist auf 100% eingestellt und muss es auch sein, weil bei mir auch das Menü links immer so groß sein soll, wie der #content-Bereich.

Hat aber einer einen Lösungsvorschlag, wie ich es hinbekomme, dass der mit JS geladene Content irgendwie IM #content sitzt und den weiter nach unten erweitert...?

Danke!

 

[SpiceLab]

Ich tippe da intuitiv auf ein CSS-Problem ;-)

Ohne die Seite in Aktion gesehen zu haben, könnte dies evtl. die Ursache sein:

• CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

height:100% birgt aber auch ein Fehlerpotential, das sich möglicherweise stattdessen mit der Mindesthöhe min-height ausräumen lässt.

 

[Trash]

Ja, das Problem kenne ich. Nur, auf meinen anderen Seiten geht es...dort werden auch per JS Dinge nachgeladen, aber es vergrößert sich automatisch. Nur auf den anderen Seiten habe ich es nicht so elegant gelöst, da die PHP Datei nach dem Ajax-Call direkt HTML-Code ausgibt, der dann in dem Div dargestellt wird. Bei dieser Seite ist es so, dass ich nach dem Ajax Call im JS den HTML Code zusammenbaue, was eigentlich sauberer ist, weil ich Darstellung und Logik trenne....

 

[SpiceLab]

[...] auf meinen anderen Seiten geht es...dort werden auch per JS Dinge nachgeladen, aber es vergrößert sich automatisch. Nur auf den anderen Seiten habe ich es nicht so elegant gelöst

Soviele "andere" Seiten, nur keine einzige davon ist uns bekannt Und was erwartest du jetzt hier?

 

[Trash]

Naja, die Seite ist noch bei mir auf dem Rechner und nicht online. Ich dachte, evtl. kennt jemand das Problem, wenn man mit JS etwas nachlädt, dass die DIV-Höhe nicht mehr stimmt, da 100% vor dem Laden anders berechnet wurden...und evtl. gibt's eine Lösung, wie man dem Browser sagt, dass er nach dem Nachladen des Contents nochmal die Größe des Divs berechnen soll...

 

[SpiceLab]

Dafür gibt es mannigfaltige Gründe und Ursachen - somit auch nicht die universelle Lösung für dein vorgetragenes Problem.

Aus diesem Grund schrieb ich im ersten Post aber auch mit Hintergedanken:

Ohne die Seite in Aktion gesehen zu haben

... damit du ein Demo online stellst.

 

[Trash]

Moin,
eine Demo online zu stellen ist nicht so einfach...

Ich versuche es mal so:

Ich habe mittlerweile herausgefunden, dass das Problem nur auftaucht wenn folgende DIV-Boxen im Spiel sind:

<div id="wrapper">
<div class="navigation">
<?
	include ('../inside/includes/navigation.php');
?>
</div>
<div id="nav"></div>
<div id="container" class="container_inside"></div><!-- container -->			
</div><!-- wrapper-->
<div style="clear:both;"></div>

Die id #container wird per JS beladen, wodurch dort ein <div class="content"> entsteht. Die CSS Rules sehen folgendermaßen aus, wobi .navigation über #nav und #container liegt. #nav ist links neben #container angeordnet. #nav und #container sollen immer gleich hoch sein. Wenn ich in dem Fenster bin und das Fenster unten rechts "anfasse" und es nach oben schiebe, sehe ich das #nav und #container im Hintergrund nach oben geschoben werden und der eigentliche Inhalt das div überlagert. Eigentlich soll es ja so sein, dass beim kleiner Ziehen des Fensters einfach der Content "verschwindet" und eben nicht das die Boxen im Hintergrund nach oben verkleinert werden. Hier mal das CSS und angehängt 2 Screenshots. Der erste zeigt das Fenster im Initialzustand und das zweite zeigt was passiert, wenn ich das Browserfenster kleiner ziehe:

CSS:

#wrapper {
	width:1042px;
	margin:0 auto;
	padding-top:2.6em;
	
	#nav {
		display:none;
		float:left;
		background-color:#fff;
		border:1px solid #D5D6D7;
		height:100%;
		width:12.5%;
		min-height:480px;
       }
      
#container {
	border: 1px solid @border_grey;
	background-color: @white;
	min-height:100%;

	&.container_inside {
		float:right;
		width: 99.9%;
		min-height: 480px;
		height: 100%;		
	}

	.content {
		width: 100%;
		height: 100%;
		border-right: 1px solid #D5D6D7;
		display: none; // diese property wird per JS sichtbar gemacht...
        }
}

Danke!

 

[SpiceLab]

Ändere mal dieses Markup:

<div id="wrapper">
...		
</div><!-- wrapper-->
<div style="clear:both;"></div>

so ab:

<div id="wrapper">
...	
<div style="clear:both;"></div>	
</div><!-- wrapper-->

damit die clear-Regel auch Wirkung zeigt.

So gesehen war meine gestrige Vermutung richtig:

Ich tippe da intuitiv auf ein CSS-Problem ;-)

Ohne die Seite in Aktion gesehen zu haben, könnte dies evtl. die Ursache sein:

• CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Mit der darin vorgestellten CSS-Technik wäre das inhaltsleere "clearing"-DIV im HTML-Code obsolet

 

[Trash]

Leider macht das aber keinen Unterschied... Der Fehler ist leider immer noch vorhanden. Wenn ich das clear unter dem wrapper wegnehmen würde, dann stimmt die Position des <footer> nicht mehr richtig. Der ist dann etwas nach oben versetzt und sitzt quasi "unter" dem #container...

 

[SpiceLab]

Was hat es denn mit dieser Schreibweise auf sich?

#wrapper {
    ...
    
    #nav {
        ...
       }

#container {
    ...
 
    &.container_inside {
       ...
    }
 
    .content {
        ...
        }
}

Das verschachteln von Deklarationsblöcken ist unzulässig, wie auch das "&"-Zeichen vor dem Klassenselektor.

Desweiteren hatte ich gestern auch von der problematischen height:100%-Regel gesprochen.