Feste Seitenleiste, die vertikal skaliert werden kann

Ich erstelle eine Bootstrap-Website. Ich habe zwei divs im Körper, die Seitenleiste und den Inhalt. Ich habe ein Inhalts-Div auf der rechten Seite, dessen Höhe von der Menge des Inhalts im Div abhängt. Ich habe eine Seitenleiste div auf der linken Seite, die mit einer Höhe befestigt werden muss, die 100% der Größe des Bildschirms ist. Wenn Sie im Inhaltsbereich weiterblättern, wird das Seitenleisten-Div nicht verschoben.Feste Seitenleiste, die vertikal skaliert werden kann

Wie würde ich einen geteilten Handler zwischen den beiden Divs hinzufügen, der es mir erlaubt, die Breite beider Divs zu verändern, wenn ich den Splitter horizontal ziehe?

Ich bekomme ein Problem, wenn ich position: fixed der Sidebar div zuweisen.

<body> 
    <div class="sidebar"></div> 
    <div class="splitter"></div> 
    <div class="content"></div> 
</body>

Quelle

2017-12-20 pgallo

Können Sie mehr über das 'position: fixed; 'Problem? – brian17han

Ich glaube, du bist für so etwas suchen:

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow-x: hidden; 
 
} 
 

 
.left { 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 250px; 
 
    
 
    /* for testing*/ 
 
    background-color: green; 
 
    color: white; 
 
    padding: 10px; 
 
} 
 

 
.right { 
 
    position: absolute; 
 
    left: 250px; 
 
    width: 100%; 
 
    
 
    /* for testing*/ 
 
    background-color: blue; 
 
    color: white; 
 
    padding: 10px; 
 
}

<div class="left">test</div> 
 

 
<div class="right"> 
 
    START!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br 
 
    /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello 
 
    World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br 
 
    /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> END! 
 
    <br /> 
 
</div>

Für den Teil „Ich habe auch einen Split-Handler zwischen den beiden divs brauchen, der mir erlaubt um die Breite beider Divs zu verändern, wenn der Splitter horizontal gezogen wird. " meinst du, du kannst sie einzeln ziehen oder möchtest du nur reagieren?

Quelle

2017-12-20 22:05:56

Ich möchte in der Lage sein, einen vertikalen Rahmen zu ziehen, der die zwei divs links oder rechts (horizontal) trennt Wenn Sie den Rahmen nach links oder rechts ziehen Die Breite beider Divs ändert sich, je nachdem, in welche Richtung Sie den vertikalen Rand ziehen. – pgallo

Feste Seitenleiste, die vertikal skaliert werden kann

Antwort

Verwandte Themen