/ / ¿Barra lateral de ancho fijo con columna de contenido receptivo en Foundation 5? - zurb-foundation, fixed, wrap, sidebar

¿Barra lateral de ancho fijo con columna de contenido receptivo en Foundation 5? - zurb-foundation, fixed, wrap, sidebar

He estado usando Foundation desde v3 y no esperaba este tipo de snafu.

En este caso particular, necesito una columna izquierda de ancho fijo (3 grandes) y luego una columna de contenido fluido / sensible (9 grandes) para el 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>

El problema es que, al reducir la escala, la columna de contenidoestá envolviendo / presionando hacia abajo debajo de la barra lateral (incluso antes de que se cruce el siguiente umbral de ancho de pantalla). Intenté clases "fijas" y "pegajosas" en la barra lateral, pero no parecen afectar este comportamiento.

No quería comenzar a piratear el CSS si había una solución existente (¿Fundación?).

¿Algún consejo?

Respuestas

7 para la respuesta № 1

Al igual que el enfoque de @naota, la respuesta que recibí de Zurb fue para hackear el CSS. Establecer una barra lateral de ancho fijo completamente posicionada, luego crear un nuevo div con margen izquierdo: 300 px;

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 sorprendentemente bien ... para un truco.


4 para la respuesta № 2

Esto es lo que uso con SASS para crear anchos de columna fijos.

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 el código

Para insertar una columna fija de 300px, agregue @include fixed(300, right); a la clase de columna derecha, y @include fluid(300, left); a la clase de columna izquierda. No mezclar con el valor predeterminado small-# column clases

Extendiendo el código

Si desea configurar clases permanentes, de forma similar a small-3 column, large-6 column, etc., solo agregue el siguiente código. Ahora podrás usar large-fluid-300-left para la columna de fluido izquierdo y large-fixed-300-right para la columna fija derecha.

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

Si trabajas con anuncios, es probable que vengasa través de un punto, donde necesitarás que la columna colapse en su propia fila, una vez que alcanza un cierto ancho mínimo. Aquí es lo que utilizo para establecer el ancho mínimo de columna.

Código

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

Usando el código

Añadir @include min(300); a una clase de columna. Debe usarse además del column clase.

Extendiendo el código

El siguiente código le permite agregar clases, como .small-min-300.column a las columnas que desea colapsar, si están apretadas por debajo 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); }
}

Lo he sacado directamente de mi archivo SASS y no he probado el código en el momento de escribirlo. Avíseme si algo no funciona como se esperaba.


3 para la respuesta № 3

Enfrenté un problema similar. El código a continuación usa display:table para envolver tu código en dos 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 esto ayude.


0 para la respuesta № 4

En caso de que alguien haya encontrado este artículo antiguo recientementetratando de encontrar una manera de tener una columna de ancho fijo en Foundation, pude hacer esto con Foundation 6. Estoy usando Flex-Grid, y hay una maravillosa clase llamada .shrink. Reducir hará que la columna sea tan ancha comoes contenido, por lo que puede tener un elemento allí como un elemento de navegación o imagen, y la columna se mantendrá ese ancho como otra columna a su alrededor ocupa el espacio restante. Pude hacer una columna de centro de ancho fijo por lo tanto :

<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 documentación oficial de la Fundación para el .shrink clase: https://codepen.io/ZURBFoundation/pen/aWYVgd