Wie kann ich meine Seitenleiste über die gesamte Seitenlänge verlängern?

Ich habe mir andere Lösungen angeschaut, aber sie funktionieren nicht für mich. Ich habe Höhe versucht: 100% auf meiner Sidebar und das macht immer noch nicht den Trick. Könnte mir bitte jemand in die richtige Richtung zeigen? Ich möchte, dass die Farbe der Seitenleiste die gesamte Seitenlänge verlängert.Wie kann ich meine Seitenleiste über die gesamte Seitenlänge verlängern?

2012-10-02 Lindsay

schnelle Antwort ist Sie "kann nicht", weil Höhe soll sich abhängig von der Größe des Inhalts ändern, so dass Sie nicht in der Lage sein, eine feste Höhe irgendwo einstellen, so dass Sie wie 100% nichts, was nichts ist. Um dies zu lösen, sollten Sie kleine Javascript verwenden – Onheiron

Es wäre beste Praxis, um Code in Materie direkt in die Frage zu schreiben, und nicht nur Links. Nun, wenn ich helfen wollte, muss ich durch 2 Dateien crawlen und nach bestimmten Zeilen suchen, anstatt Sie darauf hinzuweisen. – Tom

Ok Ich werde versuchen, etwas mehr zu erklären, hier:

Wenn Sie setzen height: 100%; in css müssen Sie sich fragen - "100% von was?" - ... Nun, das hängt davon ab, wie Sie die Position des Elements einstellen. Wenn Sie Position festlegen: absolut; dann wäre es 100% der Browseransicht des Benutzers andernfalls wäre es 100% der übergeordneten Höhe des Elements. Wenn Sie also keine richtige Höhe oder eine absolute Position einstellen, erhalten Sie nur 100% von nichts, was nichts ist (das auf die standardmäßige inhaltsbereinigte Höhe zurückgesetzt wird).
Also lassen Sie uns für einen Moment denken Sie daran machen Eltern div Position absolute und es bei 100% Höheneinstellung (so dass Ihre relativ positioniert Kinder Sidebar wird die gleiche Höhe, wenn seine Höhe auf 100% gesetzt). HERE A FIDDLE - Jetzt sehen wir, was wir haben: Wir haben ein Elternteil div (gelb) so hoch wie die Browseransicht des Benutzers, aber seine Höhe ist fest und ändert sich nicht, um den Inhalt anzupassen, dann haben wir eine Seitenleiste (rot) Die Größe des Elternteils (also seine Höhe wird nicht zum Inhalt passen), schließlich haben wir einen langen Inhaltstext (transparent bg), der die Höhe des Elternteils eindeutig überlagert und in der Mitte von Nirgendwo landet. Nicht gut ...
Was können wir tun? (doesn't seem setting parent's overflow to scroll is a good idea) ... wir müssen das Problem in der richtigen Weise beobachten: Sie haben im Grunde zwei Geschwister divs und Sie wollen, dass sie ihre inhaltliche Höhe gut passen, aber gleichzeitig wollen Sie, dass einer von ihnen seine Geschwisterhöhe behält -> keine einfachen peasy CSS-Lösungen für das (das ich kenne).
Schließlich ist mein Vorschlag, ein wenig jquery zu verwenden: here a fast setup und here the full site. Jetzt einfach schreiben:
```
var height = $('.content').height() 
$('.sidebar').height(height) 
```
and it'll work just fine. Hinweis Ich habe die absolute Position für das übergeordnete Element belassen und auf 100% Höhe festgelegt, aber keine Höhe für die Seitenleiste festgelegt, die jetzt ziemlich genau mit der tatsächlichen Größe des Inhaltsbereichs übereinstimmt.

this helps

Quelle

2012-10-02 19:47:41 Onheiron

Vielen Dank m Für diese Erklärung! Es war sehr nützlich. – Lindsay

du bist willkommen! – Onheiron

height:100% sollte gut funktionieren, aber Sie müssen sicherstellen, dass Sie das enthält div 100% sowie zu machen.

#main-content { 
    background: url("../images/diagonal-noise.png"); 
} 
#content { 
    background-color: #FEFEFE; 
    width: 920px; 
    margin-left: auto; 
    margin-right: auto; 
    border-left: 25px solid #79879E; 
    border-right: 25px solid #79879E; 
    padding: 20px; 
    height:100%; 
} 
#secondary-content { 
    background-color: #CED6E2; 
    width: 200px; 
    float: left; 
    border-right: 1px dotted #79879E; 
    padding: 10px; 
    margin: 10px 20px 10px -20px; 
    height:100%; 
}

Quelle

2012-10-02 19:05:49 Jason

Aus irgendeinem Grund funktioniert es immer noch nicht. :( – Lindsay

Du musst vielleicht etwas wie den [Faux Columns] (http://www.alistapart.com/articles/fauxcolumns/) Cheat verwenden, um es zur Arbeit zu bringen. – Jason

wird nicht funktionieren Mann, oder zumindest nicht das gut ... http://jsfiddle.net/MLsN5/1/ in der Fiddle können Sie sehen, müssen Sie die absolute Position der Position der Eltern div und auch dies macht die Höhe des Elternteils festgelegt und es wird nicht passen die Höhe des Inhalts ... Wenn du daran interessiert bist, javascipt aus zu versuchen, postest du eine Geige damit. Problem hier ist, dass du die Seitenleiste an die Größe von Geschwistern anpassen sollst – Onheiron

@Onheiron, Ihr Beitrag sehr hilfreich war. Vielen Dank!

Ich habe meinem Code eine Zeile hinzugefügt, weil ich festgestellt habe, dass kurze Inhaltsseiten nicht bis ganz nach unten reichen und die Seitenleiste ebenfalls kurz bleiben. Jetzt überprüft das Skript, ob eine Datei (.content oder body) eine höhere Höhe hat und wendet dann die gleiche Höhe auf .sidebar an.

HTML:

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

JavaScript:

$(document).ready(function() { 
    var height1 = $('.content').height() 
    var height2 = $('body').height() 

    if (height1 > height2) { 
     $('.sidebar').height(height1) 
    } else { 
     $('.sidebar').height(height2) 
    } 
});

CSS:

body, .sidebar { 
    height:100% 
}

verlieren dann den anderen Teil die if-Anweisung, da sie standardmäßig auf css gesetzt wird. Keine Notwendigkeit für das Skript, wenn der Bereich .content eine geringere Höhe als der Körper ist.

Quelle

2012-10-25 06:02:45

Das ist wirklich ziemlich einfach, wenn Sie Bootstrap v3 oder höher verwenden.

.sidebar { 
    background-color: lightgrey; 
    position: fixed; 
    bottom: 0; 
}

Presto!

Quelle

2018-01-12 21:31:08 bloodrootfc

Wie kann ich meine Seitenleiste über die gesamte Seitenlänge verlängern?

Antwort

Verwandte Themen