Na verdade, tenho dois problemas, mas vamos resolver o problema principal primeiro, pois acredito que o outro é mais fácil de resolver.
Eu tenho uma posição fixa div no lado esquerdo do pergaminho para um menu. O lado direito é uma div padrão que rola corretamente. O problema é que, quando a porta de visualização do navegador é muito pequena para ver o menu inteiro ... não há como fazer a rolagem que eu possa encontrar (pelo menos não com css). Eu tentei usar diferentes estouros em css, mas nada faz o div rolar. A div que contém o menu está definida como min-height: 100% e position: fixed .. ambos os atributos que preciso manter.
A div que contém o menu está dentro de outra div de wrapper que está posicionada absolutamente e a altura definida como 100%.
Como faço para rolar verticalmente se o conteúdo é muito alto para a div?
Isso me leva à outra questão, que eu não quero que uma barra de rolagem seja exibida ... mas acho que já posso ter uma resposta para isso (só que ainda não funciona porque não consigo fazer a div rolar começar com).
Alguma solução? Talvez o javascript seja necessário? (dos quais eu sei pouco sobre)
e o código relevante que está causando o problema (já que postar tudo aqui é muito longo):
.fixed-content {
min-height:100%;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
Também tentei adicionar height: 100% também para ver se isso era um problema, mas também não funcionava ... nem uma altura fixa, como 600px.
fonte
Respostas:
O problema com o uso
height:100%
é que ele será 100% da página em vez de 100% da janela (como você provavelmente esperaria). Isso causará o problema que você está vendo, porque o conteúdo não fixo é longo o suficiente para incluir o conteúdo fixo com 100% de altura sem a necessidade de uma barra de rolagem. O navegador não sabe / se importa que você não pode rolar a barra para baixo para vê-laVocê pode usar
fixed
para realizar o que está tentando fazer.Este garfo do seu violino mostra minha correção: http://jsfiddle.net/strider820/84AsW/1/
fonte
Aqui estão as duas correções.
Primeiro, em relação à barra lateral fixa, você precisa definir uma altura para que ela transborde:
Código HTML:
Código CSS:
Exemplo ao vivo: http://jsfiddle.net/RWxGX/3/
É impossível NÃO obter uma barra de rolagem se o seu conteúdo exceder a altura da div. É por isso que adicionei uma consulta de mídia para a altura da tela. Talvez você possa ajustar seus estilos para tamanhos curtos de tela, para que a rolagem não precise aparecer.
Cheers, Ignacio
fonte
De um modo geral, a secção fixa deve ser definida com
width
,height
etop
,bottom
propriedades, caso contrário, não irá reconhecer o seu tamanho e posição.Se a caixa usada é filho direto para o corpo e tem vizinhos, então faz sentido para verificar
z-index
etop, left
propriedades, uma vez que poderiam se sobrepõem uns aos outros, o que pode afetar o seu foco do mouse durante a rolagem do conteúdo.Aqui está a solução para uma caixa de conteúdo (um filho direto da
body
tag) que é comumente usada junto com a navegação móvel.Espero que ajude alguém. Obrigado!
fonte
As soluções aqui não funcionaram para mim, pois estou modelando componentes de reação.
O que funcionou para a barra lateral foi
Espero que isso ajude alguém.
fonte
Deixando uma resposta para quem quer fazer algo semelhante, mas na direção horizontal , como eu queria.
Ajustes @ strider820 's resposta como abaixo vai fazer a mágica:
É isso aí. Verifique também este comentário, onde o @train explicou usando
overflow:auto
overoverflow:scroll
.fonte