/ / Seitenleiste mit fester Breite und Responsive-Content-Spalte in Foundation 5? - zurb-foundation, fixed, wrap, Seitenleiste

Seitenleiste mit fester Breite und Responsive Content-Spalte in Foundation 5? - zurb-foundation, fixed, wrap, Seitenleiste

Ich benutze Foundation seit v3 und so hatte ich diese Art von Snafu nicht erwartet.

In diesem speziellen Fall brauche ich eine linke Spalte mit fester Breite (groß-3) und dann eine Flüssigkeit / reagierende Inhaltsspalte (groß-9) für den Rest.

<div class="row">

<div class="large-3 columns" id="sidebar" style="width: 300px">
sidebar
</div>

<div class="large-9 columns" id="content">
content
</div>

</div>

Problem ist beim Herunterskalieren die Inhaltsspaltewird umbrochen / unter die Seitenleiste gedrückt (noch bevor die nächste Bildschirmbreitenschwelle überschritten wird). Ich habe "fixed" und "sticky" Klassen in der # sidebar versucht, aber sie scheinen dieses Verhalten nicht zu beeinflussen.

Ich wollte nicht anfangen, das CSS zu hacken, wenn es eine existierende (Foundation?) Lösung gab.

Irgendein Rat?

Antworten:

7 für die Antwort № 1

Ähnlich wie @naotas Ansatz war die Antwort, die ich von Zurb bekam, das css zu hacken. Setze eine absolut positionierte Sidebar mit fester Breite und erstelle ein neues div mit linker Auffüllung: 300px;

Etwas wie:

<div class="row">

<div id="sidebar" style="position: absolute; width: 300px;">
</div>

<div class="large-12 columns" id="content" style="padding-left: 300px">
</div>

</div>

Es funktioniert überraschend gut ... für einen Hack.


4 für die Antwort № 2

Hier verwende ich mit SASS feste Spaltenbreiten.

Code

@mixin fixed($width, $direction) {
position: absolute;
width: rem-calc($width) + $column-gutter;
top: 0;
@if $direction == left {
left: 0;
} @else {
right: 0;
}
}
@mixin fluid($width, $direction) {
@if $direction == left {
padding-right: rem-calc($width) + ($column-gutter * 1.5);
} @else {
padding-left: rem-calc($width) + ($column-gutter * 1.5);
}
}

Den Code verwenden

Um eine feste, 300px, rechte Spalte einzufügen, fügen Sie hinzu @include fixed(300, right); in die rechte Spalte Klasse und @include fluid(300, left); zur linken Spaltenklasse. Nicht mit dem Standard mischen small-# column Klassen.

Erweitern des Codes

Wenn Sie permanente Klassen ähnlich einrichten möchten small-3 column, large-6 columnFügen Sie einfach den folgenden Code hinzu. Sie können jetzt verwenden large-fluid-300-left für die linke Flüssigkeitssäule und large-fixed-300-right für die richtige feste Spalte.

// Fixed 300px
.row { position: relative; }
@media #{$small-up} {
.small-fixed-300-left.column { @include fixed(300, left); }
.small-fixed-300-right.column { @include fixed(300, right); }
.small-fluid-300-left.column { @include fluid(300, left); }
.small-fluid-300-right.column { @include fluid(300, right); }
}
@media #{$medium-up} {
.medium-fixed-300-left.column { @include fixed(300, left); }
.medium-fixed-300-right.column { @include fixed(300, right); }
.medium-fluid-300-left.column { @include fluid(300, left); }
.medium-fluid-300-right.column { @include fluid(300, right); }
}
@media #{$large-up} {
.large-fixed-300-left.column { @include fixed(300, left); }
.large-fixed-300-right.column { @include fixed(300, right); }
.large-fluid-300-left.column { @include fluid(300, left); }
.large-fluid-300-right.column { @include fluid(300, right); }
}

Wenn Sie mit Anzeigen arbeiten, werden Sie wahrscheinlich kommenüber einen Punkt, an dem die Spalte in eine eigene Zeile minimiert werden soll, sobald sie eine bestimmte Mindestbreite erreicht. Hier werden die minimalen Spaltenbreiten festgelegt.

Code

@mixin min($width) {
width: $width + px;
float: left;
box-sizing: content-box;
+ .column {
float: left;
}
}

Den Code verwenden

Hinzufügen @include min(300); zu einer Spaltenklasse. Muss zusätzlich zu den verwendet werden column Klasse.

Erweitern des Codes

Mit dem folgenden Code können Sie Klassen hinzufügen, z .small-min-300.column zu Spalten, die Sie einklappen möchten, wenn sie jeweils unter 300px komprimiert sind.

// Min 300px
@media #{$small-up} {
.small-min-300.column { @include min(300); }
}
@media #{$medium-up} {
.medium-min-300.column { @include min(300); }
}
@media #{$large-up} {
.large-min-300.column { @include min(300); }
}

Ich habe dies direkt aus meiner SASS-Datei gezogen und habe den Code zum Zeitpunkt des Schreibens noch nicht getestet. Lassen Sie es mich wissen, wenn etwas nicht wie erwartet funktioniert.


3 für die Antwort № 3

Ich sah mich einem ähnlichen Problem gegenüber. Der folgende Code verwendet display:table um deinen Code in zwei Teile zu verpacken.

CSS:

<style type="text/css">
.wrapper_table{
display: table;
width:100%;
}
.wrapper_row{
display:table-row;
vertical-align:top;
}
.wrapper_cell{
display:table-cell;
vertical-align:top;
}
</style>

HTML:

<section class="wrapper_table">
<div class="wrapper_row">
<div class="wrapper_cell">
<!-- your side bar is here -->
<div class="columns" id="sidebar" style="width:300px;">
sidebar
</div>
</div>
<div class="wrapper_cell">
<div class="row">
<!-- your content is here -->
<div class="large-12 columns" id="content" >
content content content content content
content content content content content
</div>
</div>
</div>
</div>
</section>

Hoffe das hilft.


0 für die Antwort № 4

Falls jemand diesen alten Artikel kürzlich gefunden hatIch habe versucht, einen Weg zu finden, um eine Spalte fester Breite in Foundation zu haben, ich konnte das mit Foundation 6 machen. Ich benutze das Flex-Grid, und es gibt eine wunderbare Klasse namens .shrink. Shrink macht die Spalte nur so breit wiees ist der Inhalt, also kann man ein Element wie ein Nav-Element oder ein Bild darin haben, und die Spalte bleibt diese Breite, während andere Spalte den verbleibenden Platz einnehmen. Ich konnte also eine Mittelspalte mit fester Breite machen :

<div class="row">
<div class="columns"></div>
<div class="shrink columns">
This will shrink to it"s contents - set a width on something here!
</div>
<div class="columns"></div>
</div>

Offizielle Doc-Seite der Stiftung für die .shrink Klasse: https://codepen.io/ZURBFoundation/pen/aWYVgd