[ERLEDIGT] Rahmen um eine Seite mit 100% Höhe, auch wenn Off-Canvas mit js verschoben wird.

[bruderjakob82]

Hallo, ich bin mir nicht sicher, ob die Frage wirklich ins CSS oder vielleicht doch ins js Board gehört, aber ich erkläre am besten mein Problem.

Ich baue gerade eine Seite, mit einem Off-Canvas Menü, das von oben reinfährt und den Inhalt der Seite nach unten verschiebt. Ringsum des zu Beginn sichtbaren Bereichs, soll ein Rahmen sein. Und jetzt kommt halt das Problem. Habe ich eine Seite mit wenig Inhalt, hat der Rahmen entweder nicht 100% der Höhe, sondern umrahmt nur den Inhalt. Dafür passt es es bei einem Content, der größer als der sichtbare Bereich ist. Oder andersrum. Und da das alles noch zu einfach wäre, habe ich auch das Problem, dass beim ausfahren des Off-Canvas sich der Rahmen mit anpasst. Es passiert zum Beispiel, dass der Rahmen 100% der Höhe ausfüllt, beim ausfahren des Off-Canvas er aber nicht mitwächst. Ich hoffe ihr könnt es nachvollziehen.

Würde mich freuen, wenn mir jemand weiterhelfen kann.

 

[SpiceLab]

Lösung: eine Mindesthöhe für #site-wrapper einrichten, damit sie bei zunehmenden Inhalt mitwächst.

#site-wrapper {
    top: 0;  
    left:0;
    width: 100%;
    min-height: 100%; /* anstatt height:100% */
    position: relative;
    z-index: 1;
    background:#D0D0D0;
}

 

[bruderjakob82]

Das löst das Problem leider nicht.
Habe auch schon probiert, den Rahmen nicht auf ein DIV zu setzen, sondern auf body oder html. Aber es gibt immer nur Varianten des Problems. Es passt dann hier, aber dort nicht mehr.

 

[SpiceLab]

Vielleicht schwebt Dir dann eher das vor:

#site-wrapper {
   top: 0; 
   left:0;
   width: 100%;
   height: 100%;
   position: relative;
   z-index: 1;
   background:#D0D0D0;
}

#site-canvas {
   width: 100%;
   min-height: 100%; /* anstatt height:100% */
   position: relative;
   border-top: 10px solid #FF0044;
   border-left: 10px solid #0004A9;
   border-right: 10px solid #0004A9;
   border-bottom: 10px solid #0004A9;
   box-sizing: border-box;
   -webkit-transform: translateY(0);
   transform: translateY(0);
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   -webkit-transition: 300ms ease all;
   transition: 300ms ease all;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   background:#858585;
}

 

[bruderjakob82]

Der Teufel steckt im Detail, jetzt klappt es! Ich danke dir Spicelab, für deine Untersützung!

 

[SpiceLab]

Gern geschehen :)