Sie benötigen CSS Sidebar Höhe mit Inhalt zu erweitern

StackOverflow https://stackoverflow.com/questions/1610710

  •  05-07-2019
  •  | 
  •  

Frage

Ich habe eine zweispaltige Layout, mit einem grauen Kasten auf der rechten Seite. Ich brauche die Höhe der Seitenleiste zu erweitern, wenn die Höhe der linken Spalte erhöht wird (wegen des Inhalts dynamisch erweitert werden). Ich kann die Sidebar mache eine statische Seite passen, aber ich kann nicht mit dem Rest der Seite in der Größe zu erhöhen. Hat einige googeln, aber konnte keine Behelfslösung finden, die für mich gearbeitet.

Wer weiß, wie dies zu tun?

War es hilfreich?

Lösung

Dies ist ein häufiges Problem, wenn DIVS für diese Art von Layout.

Wenn Sie Google 'Faux Spalte' sollten Sie einige Antworten bekommen.

zB. http://www.alistapart.com/articles/fauxcolumns/

Andere Tipps

Dies kann leicht aus, aber wenn Sie jQuery auf Ihrer Website verwenden, können Sie eine schnelle Berechnung durchführen und alle DIVs die Größe eine ähnliche Klasse auf die maximale Höhe teilen: 

$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));

Ich habe dieses Problem für eine Weile verfolgt, und ich schrieb einen Artikel zu diesem Thema: Fertig mit faux Spalten . Hier ist, was ich argumentiert:

  

JavaScript-basierte Lösung für diese   Problem ist nicht schlechter als jeder andere   Lösung. In der Tat, wenn Sie mit   JavaScript, können Sie ein paar Stunden sparen   Frustration zu versuchen, Dinge zu bekommen   Arbeiten. Die Menschen werden Sie warnen vor   dies mit den Worten: „Was passiert, wenn   der Benutzer JavaScript deaktiviert? „.   Glauben Sie mir, wenn der Benutzer sich hat sich   JavaScript, um die meisten der Bahn gebrochen   für ihn trotzdem. Sidebar funktioniert nicht   Rolle für ihn.

Wie cballou erwähnt, ist der einfachste Weg, dies zu tun ist JQuery-Code zu verwenden: 

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

änderte ich den background-color auf die gleiche Farbe wie meine Sidebar, auf der jeweiligen Seite, obwohl ich Hintergründe tun muß, für alle meine Abschnitte eher als ein Gesamt Hintergrund. Aber das ist vielleicht nicht für alle.

In meinem Sheet 

.sidec
{
background-color:#123456;
}

In meiner HTML-Seite 

<body class="sidec">

content....

</body>

Vor kurzem sah ich eine sehr kreative Lösung für dieses Problem mit dem CSS-Eigenschaften position:absolute und border.

Auf jeden Fall einen Besuch wert, um zu sehen, ob es für Sie arbeitet.

Link: http: //woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/

Ich bin mir nicht sicher, ob dies helfen, da ich ein Neuling bin. Wenn jedoch kämpfen, um mit meiner Sidebar immer den ganzen Inhalt zu zeigen, wenn ich verdoppelt seine Größe ich folgendes getan haben. Ich änderte meine Höhe und Breite ohne Antwort, bis ich die Klasse geändert. Meine Klasse wurde SB-Rahmen SB Breite aufgelistet. Also, wenn ich meine Klasse geändert lesen SB Höhe SB Breitet sie passte zu meinem Gehalt statt der ursprünglichen Rahmengröße. Ich habe auch versucht SB max sb Breite mit zu gearbeitet, aber es hat meine Fußzeile Menüleiste aus (was bedeutet, es würde es nicht mehr zeigen). Ich ging in SB Höhe SB Breite zurück, und alles ist gut. Das ist Superduper elementar für alle von Ihnen Ich bin sicher, aber nur für den Fall gibt es einen weiteren Neuling diese zu lesen, die über HTML-Code, wie ich nicht viel verstehen ... Ich hoffe, das hilft =) Frohe Feiertage jeder! Umarmungen, tara

Ich vermute, Sie bestimmten Effekt zu Ihrem Layout, so dass es erfordert beiden Spalten, um die Größe zusammen anwenden mögen. Wenn Sie die Werte der Höhe der Spalten dynamisch ändern wollen, bezweifle ich es mit CSS arbeiten einfach wird, wenn Sie einige Javascript implementieren, um den Stil zu steuern.

schauen Sie auf den Link auf faux Spalten

Wie Dal, vorgeschlagen. Wie der Name schon sagt, ist die Lösung nicht viel über die Spalten Höhe zu ändern. Stattdessen gibt es die „Illusion“, dass beide Säulen erscheinen die gleiche Höhe sein, wenn sie in Wirklichkeit sind sie nicht -. Und ist mit der Verwendung von Fliesen Hintergrundbild

Die Idee ist es nicht notwendig ist, den Aufschlag zu erschweren. Einfache Struktur mit einem Hauch von „Illusion“ mit Bildern ist eine gängige Praxis in Web-Design.

Viele Grüße, Jonah

Mit der schlechten Haltung gegenüber neuen Mitgliedern hier erwarte ich für diese Antwort kaserniert zu werden, hier geht. Ich habe, um dieses Problem durch ein Hintergrundbild 960px breit 1px hoch mit den beiden Farben zu schaffen ich für die Spalten in ihren jeweiligen Breiten benötigt (780px und 180px). Ich habe dann verwenden diese als Hintergrundbild für meinen Container auf der y-Achse wiederholt und machte den Inhalt und die rechte Seitenleiste background-color:. Transparent 

 .container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto; 
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}

.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}

.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}

Ich bin sicher, dass diese Methode hat ihre Grenzen, aber es funktioniert perfekt auf all meinen Seiten.

Es ist möglich, dass ich das nicht sehr gut erklärt haben, wenn ja, schön, darüber wird es Ihnen beliebt. Ich werde endevour auf meine Methode zu erweitern (was wahrscheinlich bereits allgemein bekannt ist).

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top