/ / Zurb 4 seções roláveis ​​separadamente - zurb-foundation

Zurb 4 seções roláveis ​​separadamente - zurb-foundation

Eu tenho um layout de tela cheia com base em uma resposta a uma pergunta feita anteriormente:

Layout de grade de tela cheia em CSS (com algumas seções de rolagem)

Wireframe eu estou usando:

insira a descrição da imagem aqui

Edit: Este é um comportamento de layout muito semelhante que eu estou olhando para recriar no Zurb 4 (larguras e alturas não precisam ser corrigidas): http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

Funciona muito bem, no entanto, estou agora tentando modelar o mesmo layout / similar no Zurb Foundation 4, mas tendo problemas com duas coisas:

  1. Não está claro como eu posso ter B e E rolar verticalmente e de forma independente (acho layout Mail.app em um Mac)

  2. Não está claro como eu poderia ter C e F fixados na parte inferior da tela.

Ao contrário da minha pergunta anterior, não pretendo ter larguras de pixels fixas para essas seções.

Nota: Acredito no design mobile-first, mas não vejo por que nada disso seria considerado "responsivo". Eu planejo redimensionar e mostrar / ocultar seções dependendo do dispositivo e da orientação. Mas as seções de rolagem e altura total parecem estar faltando no Zurb.

Respostas:

5 para resposta № 1

Existem coisas principais que precisavam ser feitas com base em sua exigência:

Primeiro, use toda a largura da página

Você quer que o layout preencha a página inteira e para isso você precisa substituir uma classe Foundation como esta:

.row {
max-width: 100%;
}

Em segundo lugar, cole o rodapé na parte inferior então você pode ter uma barra de rolagem para B e E. Aqui está um CSS pegajoso que eu modifiquei para fazê-lo funcionar com um template Foundation.

html, body, #wrapper{ height: 100%; }
body > #wrapper{height: auto; min-height: 100%;}
#main { padding-bottom: 75px; /*  same height as the footer */
overflow:hidden;
top: 75px; bottom: 0; left: 0; right: 0;
padding-bottom: 75px;
position: absolute;
}
#footer {
position: relative;
margin-top: -75px; /* negative value of footer height */
height: 75px;
clear:both;
}

.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}

A chave são os quatro divs contêineres: envoltório, cabeçalho, principal e rodapé. Eu suponho que seu cabeçalho terá uma altura fixa, pois pode ser um banner ou menu para que você possa adicionar a classe no código a seguir (ver terceiro ponto).

Em terceiro lugar, deixe as DIVs do meio se alongarem então eles têm barras de rolagem para conteúdo longo

#header {
height:75px; // your desired height
}
// additional style for the "main" class
#main {
top: 75px; bottom: 0; left: 0; right: 0; // top is the same as header.height
}
// this will create a scroll bar on section B
#main .b {
overflow:auto;
height:100%;
}
// this will create a scroll bar on section E
#main .e {
overflow:auto;
height:100%;
}

Tome nota que enquanto seções B e E será responsivo na medida em que eles irão empilhar um sobre o outro, a altura será corrigida, e eu acho que você espera que isso aconteça como você quer uma barra de rolagem em cada um deles.

Como você mencionou em seu comentário que meucódigo anterior não está funcionando e isso é porque se você visualizá-lo em um dispositivo móvel, você tem uma pequena área para trabalhar. Quanto menor o dispositivo fica, menos real você tem. O que você precisa fazer é decidir em que ponto você não iria querer rolar o seu conteúdo principal (Seções B e E).

Não é uma boa ideia deixar seus usuáriosrole algumas partes do seu site. Então deixe-os ter dificuldade em rolar para o resto das seções (resto da página) apenas para que eles rolem novamente em outra seção. E isso é antes de chegar ao final da página. Então, o que você precisa com base nessa sugestão é:

@media only screen and (max-width: 768px) {
#main {
padding-bottom: 0;
position:inherit
}
#footer {
margin-top: 0;
}
#main .b {
overflow:auto;
height:auto;
}
#main .e {
overflow:auto;
height:auto;
}
}

Veja em ação aqui. Você vai ver lá que em dispositivos menores, orodapé vai ficar no fundo com os dois contêineres empilhados em cima do outro. Em uma visualização de área de trabalho, o rodapé ficará colado à direita e você terá barras de rolagem para o conteúdo principal, se necessário.


Perguntas relacionadas


Comentários (0)

Adicione um comentário