/ / Barra lateral de largura fixa com coluna de conteúdo responsivo no Foundation 5? - zurb-foundation, fixo, wrap, barra lateral

Barra lateral de largura fixa com coluna de conteúdo responsivo no Foundation 5? - zurb-foundation, fixo, wrap, barra lateral

Eu tenho usado Foundation desde a v3 e então eu não esperava esse tipo de confusão.

Neste caso em particular, eu preciso de uma coluna esquerda de largura fixa (grande-3) e depois uma coluna de conteúdo fluido / responsivo (grande-9) para o restante.

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

O problema é, ao reduzir, a coluna de conteúdoestá sendo encolhido / forçado abaixo da barra lateral (mesmo antes que o próximo limite de largura de tela seja ultrapassado). Eu tentei classes "fixas" e "pegajosas" no #sidebar, mas elas não parecem afetar esse comportamento.

Eu não queria começar a hackear o CSS se houvesse uma solução existente (Foundation?).

Algum conselho?

Respostas:

7 para resposta № 1

Assim como a abordagem da @naota, a resposta que recebi da Zurb foi para hackear o css, definir uma barra lateral de largura fixa e posicionada de forma absoluta e criar uma nova div com preenchimento à esquerda: 300px;

Algo como:

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

Funciona surpreendentemente bem ... para um hack.


4 para resposta № 2

Aqui está o que eu uso com o SASS para criar larguras de coluna fixas.

Código

@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 o código

Para inserir uma coluna direita fixa de 300px, adicione @include fixed(300, right); para a coluna da direita e @include fluid(300, left); para a coluna da esquerda. Não misture com o padrão small-# column classes.

Estendendo o código

Se você gostaria de configurar classes permanentes, similarmente small-3 column, large-6 column, etc, basta adicionar o seguinte código. Você agora poderá usar large-fluid-300-left para a coluna de fluido esquerda e large-fixed-300-right para a coluna fixa direita.

// 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 você está trabalhando com anúncios, provavelmente viráatravés de um ponto, onde você precisará da coluna para recolher em sua própria linha, uma vez que atinge uma certa largura mínima. Aqui está o que eu uso para definir larguras de coluna mínima.

Código

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

Usando o código

Adicionar @include min(300); para uma classe de coluna. Deve ser usado além do column classe.

Estendendo o código

O código a seguir permite adicionar classes, como .small-min-300.column para as colunas que você deseja recolher, se elas estiverem abaixo de 300px.

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

Eu puxei isso diretamente do meu arquivo SASS e não testei o código no momento da escrita. Deixe-me saber se algo não funciona como esperado.


3 para resposta № 3

Eu enfrentei um problema semelhante. O código abaixo usa display:table para envolver seu código em duas partes.

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>

Espero que isto ajude.


0 para a resposta № 4

Caso alguém encontre este artigo antigo recentementetentando encontrar uma maneira de ter uma coluna de largura fixa no Foundation, eu pude fazer isso com o Foundation 6. Eu estou usando o Flex-Grid, e há uma classe maravilhosa chamada .shrink. O encolhimento fará com que a coluna seja tão larga quantoé o conteúdo, para que você possa ter um elemento lá como um item de navegação ou imagem, e a coluna permanecerá nessa largura enquanto outras colunas em torno dele ocupam o espaço restante. Eu consegui fazer uma coluna central de largura fixa assim :

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

Página de documentação da Fundação Oficial para o .shrink classe: https://codepen.io/ZURBFoundation/pen/aWYVgd