Wie kann ich die Mindesthöhe meines Menüs wie meine Kopfzeile einstellen?

Also ich habe dieses Problem auf kleineren Bildschirmen. Ich möchte, dass mein Menü 100% Höhe und 100% Breite hat - 25px Rand auf allen Seiten. Das Problem ist, wenn jemand einen kleinen Bildschirm hat, kann ich den Header-Inhalt (Text) unter meinem Menü wegen meiner 25px botton margin sehen. Gibt es eine Möglichkeit, das zu beheben?Wie kann ich die Mindesthöhe meines Menüs wie meine Kopfzeile einstellen?

https://jsfiddle.net/vh2zugku/1/

position: absolute; 
top: 25px; 
right: 25px; 
left: 25px; 
z-index: 1; 
height: calc(100% - 50px); 
margin: auto; 
color: white; 
background: $Black; 
opacity: 0; 
visibility: hidden; 
padding: 0; 
overflow: hidden;

Dieses pls seltsam aussehen, aber mit der Höhe spielen und sehen, was ich meine.

Quelle

2016-03-30 Cylion

Ist es möglich, einen Rahmen mit der gleichen Farbe wie den Körperhintergrund zu verwenden? Sie könnten das Aussehen von Abstand haben, aber es wäre nur eine Grenze. –

Uhm, guter Punkt, ich werde es jetzt versuchen. – Cylion

Ok, das hat super funktioniert ... Ich bin dumm. Wie auch immer. Ist da weg, dass ich Leute vom Scrollen blockieren kann? Sie können immer noch nach unten scrollen. – Cylion

Wenn der Hintergrund eine Volltonfarbe ist, können Sie statt einer Lücke einfach einen Rahmen verwenden. Stellen Sie nur sicher, dass der Rahmen die gleiche Farbe wie der Dokumenthintergrund hat.

Das ist wie etwas entlang der Linien von aussehen:

.overlay { 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    bottom: 0; 
    /* height is removed but you could set it to 100% */ 
    border: 25px solid #F3F5F6; 
    ... 
}

Auch anstelle der anderen Kommentar über die Frage selbst, here is a quick fiddle, die einen Körper Klasse setzt, wenn das Menü geöffnet und entfernt sie beim Schließen . (Dies ist eine Reaktion auf Ihren obigen Kommentar.) Diese Klasse setzt den Text auf position: fixed. Es verhindert das Scrollen. Sie könnten auch overflow:hidden auf dem Körper verwenden, um einen ähnlichen Effekt zu erzielen.

Quelle

2016-03-30 19:36:09

Wie kann ich die Mindesthöhe meines Menüs wie meine Kopfzeile einstellen?

Antwort

Verwandte Themen