/ / Barra laterale a larghezza fissa con colonna di contenuto reattivo in Foundation 5? - zurb-foundation, fixed, wrap, sidebar

Barra laterale a larghezza fissa con colonna di contenuto reattivo in Foundation 5? - zurb-foundation, fixed, wrap, sidebar

Ho usato Foundation dalla v3 e quindi non mi aspettavo questo tipo di snafu.

In questo caso particolare ho bisogno di una colonna di sinistra a larghezza fissa (grande-3) quindi di una colonna di contenuto fluido / reattivo (grande-9) per il resto.

<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>

Il problema è, quando si ridimensiona, la colonna del contenutoè avvolgente / forzato verso il basso sotto la barra laterale (anche prima che venga superata la soglia della larghezza della schermata successiva). Ho provato le classi "fisse" e "appiccicose" nella #sidebar ma non sembrano influenzare questo comportamento.

Non volevo iniziare a hackerare il CSS se esisteva una soluzione esistente (Foundation?).

Qualche consiglio?

risposte:

7 per risposta № 1

Proprio come l'approccio di @naota, la risposta che ho ricevuto da Zurb è stata quella di hackerare il css. Impostare una sidebar a larghezza fissa posizionata in modo assoluto, quindi creare un nuovo div con il padding sinistro: 300px;

Qualcosa di simile a:

<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>

Funziona sorprendentemente bene ... per un trucco.


4 per risposta № 2

Ecco cosa uso con SASS per creare larghezze di colonna fisse.

Codice

@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);
}
}

Usando il codice

Per inserire una colonna fissa, 300 px, a destra, aggiungi @include fixed(300, right); alla classe della colonna di destra, e @include fluid(300, left); alla classe della colonna di sinistra. Non mescolare con l'impostazione predefinita small-# column classi.

Estendere il codice

Se ti piacerebbe impostare le classi permanenti, allo stesso modo di small-3 column, large-6 column, ecc, basta aggiungere il seguente codice. Ora sarai in grado di usarlo large-fluid-300-left per la colonna del fluido sinistro e large-fixed-300-right per la colonna fissa giusta.

// 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); }
}

Se lavori con gli annunci, probabilmente verraiattraverso un punto, dove avrai bisogno che la colonna collassi nella sua stessa riga, una volta raggiunta una certa larghezza minima, ecco cosa uso per impostare le larghezze minime delle colonne.

Codice

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

Usando il codice

Inserisci @include min(300); a una classe di colonne. Deve essere utilizzato in aggiunta al column classe.

Estendere il codice

Il seguente codice consente di aggiungere classi, come ad esempio .small-min-300.column alle colonne che desideri collassare, se sono schiacciate sotto 300 px.

// 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); }
}

L'ho estratto direttamente dal mio file SASS e non ho ancora testato il codice al momento della scrittura. Fammi sapere se qualcosa non funziona come previsto.


3 per risposta № 3

Ho affrontato un problema simile. Il codice seguente utilizza display:table per avvolgere il tuo codice in due parti.

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>

Spero che questo ti aiuti.


0 per risposta № 4

Nel caso qualcuno abbia trovato questo vecchio articolo di recentecercando di trovare un modo per avere una colonna a larghezza fissa in Foundation, sono stato in grado di farlo con Foundation 6. Sto usando la Flex-Grid, e c'è una classe meravigliosa chiamata .shrink. Shrink renderà la colonna larga solo quantoè il contenuto, quindi puoi avere un elemento lì dentro come un oggetto o un'immagine nav, e la colonna rimarrà tale larghezza mentre l'altra colonna attorno a esso occuperà lo spazio rimanente. Sono stato in grado di fare una colonna centrale a larghezza fissa :

<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>

Pagina ufficiale del documento della Fondazione per il .shrink classe: https://codepen.io/ZURBFoundation/pen/aWYVgd