Fixed Menü auf der rechten Seite

Ich habe eine Webseite mit einem Haupt-Div in der Mitte, die vertikal durchgeblättert werden kann.Fixed Menü auf der rechten Seite

Ich möchte ein festes Menü haben, das auf der rechten Seite der Seite stecken bleibt. Allerdings, wenn ich ‚position: fixed‘ verwenden, überlappt das Menü die zentrale div wenn ich die Seite die Größe der zentralen div kleiner zu sein als

Volle Breite Seite:

Resized Seite:

Stattdessen möchte ich, dass die minimale Breite des zentralen Bereichs Vorrang hat und das festgelegte Menü nur dann angezeigt wird, wenn Sie in diesem Fall nach rechts scrollen.

Ist es möglich, dass ein festes Menü rechts neben dem zentralen Teil positioniert ist, anstatt auf der rechten Seite des Browsers zu bleiben?

Sorry, wenn diese Frage nicht klar ist, werde ich beantworten gerne alle Unsicherheiten in den Kommentaren

Quelle

2017-11-30 Adam Arcaro

Um Ihre Frage zu beantworten, ** ja **, ist es möglich, das zu erreichen. Wie für ** wie ** Sie das erreichen können, müssen Sie Ihre Frage aktualisieren, so dass es Ihren ** relevanten Code ** in einem [** minimalen, vollständigen und überprüfbaren Beispiel **] zeigt (http: // /stackoverflow.com/help/mcve). Es wäre auch hilfreich, wenn Sie uns mitteilen könnten, was Sie bisher versucht haben (http://meta.stackoverflow.com/questions/261592), um Ihr Problem zu lösen. Weitere Informationen finden Sie in der Hilfe zu [** Wie stelle ich gute Fragen?] (Http://stackoverflow.com/help/how-to-ask). –

Sie könnten ein zweites div hinzufügen, die die gleiche Breite wie das Menü unter dem Menü ist das Zentrum div zu drücken oder über Sie könnten Größe einfach das Hauptdiv.

Quelle

2017-11-30 20:38:38 Dakota

Verwenden Sie This kann am Anfang verwirrend sein, wird aber die Lösung sein. (mache ein leeres div mit der Klasse "col-md-8" und gebe dann dem navebar ein surround div mit der Klasse "col-md-4") Überall gibt es Lektionen dazu, also sollte es nicht schwer sein abholen. hoffe das hilft :)

Quelle

2017-11-30 20:44:11

Ein einfacher aber effizienter Ansatz wäre die Verwendung von flexbox. Sagen Sie Ihre zentrale div ist 600px und die Sidebar ist 200px, dann würden Sie das folgende CSS haben:

.container { 
    width: 100%; 
    display: flex; 
    // flex defaults to left-to-right row & nowrap, fine in this case 
    justify-content: space-between; 
    // makes sure your 2 child divs will be pushed left & right 
} 

.main { 
    flex-grow: 1; // makes the main div grow to occupy space if width > 800px 
    flex-shrink: 0; // main div never shrinks below its flex-basis size 
    flex-basis: 600px; 
} 

.sidebar { 
    flex-grow: 0; // sidebar never grows 
    flex-shrink: 0; // and never shrinks 
    flex-basis: 200px; 
}

this Codepen

Eine Einschränkung Siehe: Flexbox Unterstützung auf älteren Browsern wackelig ist (IE 10) oder flat-out nicht unterstützt (IE 9 & unten).

Quelle

2017-11-30 21:05:25 Jaxx

Fixed Menü auf der rechten Seite

Antwort

Verwandte Themen