Sidebar-Höhe nach Seitenlänge ändern

Ich baue einen Webshop mit einer Sidebar mit einer Art Navbar auf der linken Seite. Aber der Hintergrund (Farbe Braun) muss die ganze linke Seite ausfüllen, aber wenn meine Seite länger ist, bedeckt sie nicht die komplette linke Seite.Sidebar-Höhe nach Seitenlänge ändern

Das ist mein CSS für den Hintergrund:

.sidebar { 
    z-index:   10; 
    border-top:   2px #000000; 
    position:   absolute; 
    float:    left; 
    left:    0; 
    margin-top:   -5%; 
    padding-bottom:  -10px; 
    width:    15%; 
    min-height:   115%; 
    max-height:   200%; 
    background:   #C6A970; 
}

Hat jemand eine Idee, wie die linke Seite von meiner Webseite zu decken?

Vielen Dank im Voraus!

Quelle

2016-03-22 TLR

ein jsfiddle würde Ihnen helfen und uns zu debuggen – Saba

Sie müssen entweder CSS-Hacks verwenden, um die Seitenleiste nach unten zu erweitern oder Javascript –

Ohne Kontext ist es schwer zu debuggen, aber Sie können versuchen, 'min-height zu verwenden: 100vh; 'auf Ihrer Seitenleiste, um mindestens das Ansichtsfenster zu füllen. – Paul

nach den Informationen die Sie Sie wahrscheinlich so etwas suchen hat :

Fiddle

Ihre bereitgestellt CSS zeigt bereits, dass Ihr Code chaotisch sein muss, mit float und position absolute zusammen ist seltsam und Ihre min-height und max-height sind über 100%.

Wir könnten ein wenig besser helfen, wenn Sie den vollständigen Code bereitstellen.

Quelle

2016-03-22 09:51:49 Roman

Ja, das ist was ich suche. Float war in meinem Code nutzlos, also habe ich es jetzt gelöscht. Das Problem ist, die Seitenleiste bleibt irgendwo in der Mitte meiner Webseite stehen. Es gibt also immer noch einen weißen Balken. Ein weiteres Problem ist, dass jede Seite eine variable Höhe hat ... – TLR

Bitte versuchen Sie dies:

Mit dieser css:

.sidebar { 
     z-index:   10; 
     border-top:   2px #000000; 
     position:   absolute; 
     float:    left; 
     left:    0; 
     bottom:    0; 
     margin-top:   -5%; 
     padding-bottom:  -10px; 
     width:    15%; 
     min-height:   100%; 
     background:   #C6A970; 
    }

oder zum jsfiddle Link unten verweisen:

https://jsfiddle.net/89f074ke/1/

Quelle

2016-03-22 09:47:57 satya

Das habe ich schon probiert und behebt mein Problem nicht ;-) – TLR

Antwort

Verwandte Themen