Tenha uma div de posição fixa que precise rolar se o conteúdo exceder

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)

Exemplo de JS Fiddle

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.

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

Você pode usar fixedpara realizar o que está tentando fazer.

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

Este garfo do seu violino mostra minha correção: http://jsfiddle.net/strider820/84AsW/1/

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:

<div id="sidebar">Menu</div>
<div id="content">Text</div>

Código CSS:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

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

De um modo geral, a secção fixa deve ser definida com width, heighte top, bottompropriedades, 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-indexe top, leftpropriedades, 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 bodytag) que é comumente usada junto com a navegação móvel.

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

Espero que ajude alguém. Obrigado!

As soluções aqui não funcionaram para mim, pois estou modelando componentes de reação.

O que funcionou para a barra lateral foi

.sidebar{
position: sticky;
top: 0;
}

Espero que isso ajude alguém.

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:

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

É isso aí. Verifique também este comentário, onde o @train explicou usando overflow:autoover overflow:scroll.