Como posso tornar o conteúdo de um elemento fixo rolável apenas quando ele excede a altura da janela de visualização?

Eu tenho um divposicionado fixedno lado esquerdo de uma página da web, contendo menus e links de navegação. Não tem altura definida a partir do css, o conteúdo determina a altura, a largura é fixa. O problema é que, se o conteúdo for muito, o divserá maior do que a altura da janela e parte do conteúdo não ficará visível. (Rolar a janela não ajuda, já que a posição é fixede divnão rola.)

Eu tentei definir overflow-y:auto; mas também não ajudou, o div não parece notar que parte dele está fora da janela.

Como posso tornar seu conteúdo rolável apenas, se necessário, se ele divpendurar para fora da janela?

Você provavelmente não pode. Aqui está algo que chega perto. Você não conseguirá que o conteúdo flua em torno dele se houver espaço abaixo.

http://jsfiddle.net/ThnLk/1289

.stuck {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 180px;
    overflow-y: scroll;
}

Você também pode fazer uma porcentagem de altura:

http://jsfiddle.net/ThnLk/1287/

.stuck {
    max-height: 100%;
}

O link abaixo irá demonstrar como eu fiz isso. Não é muito difícil - basta usar algum desenvolvedor front-end inteligente !!

<div style="position: fixed; bottom: 0%; top: 0%;">

    <div style="overflow-y: scroll; height: 100%;">

       Menu HTML goes in here

    </div>

</div>

http://jsfiddle.net/RyanBrackett/b44Zn/

Você provavelmente precisa de um div interno. Com css é:

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   overflow-y: auto;
   width: 200px; // your value
}
.inner {
   min-height: 100%;
}

Experimente isto na sua posição: elemento fixo.

overflow-y: scroll;
max-height: 100%;

Isso é absolutamente viável com alguma mágica do flexbox. Dê uma olhada nesta caneta .

Você precisa de css assim:

aside {
  background-color: cyan;
  position: fixed;
  max-height: 100vh;
  width: 25%;
  display: flex;
  flex-direction: column;
}

ul {
  overflow-y: scroll;
}

section {
  width: 75%;
  float: right;
  background: orange;
}

Isso funcionará no IE10 +

Aqui está a solução HTML e CSS pura .

1. Criamos uma caixa container para navbar com posição: fixa; altura: 100%;

2. Em seguida, criamos uma caixa interna com altura: 100%; overflow-y: scroll;

3. Em seguida, colocamos o conteúdo dentro dessa caixa.

Aqui está o código:

.nav-box{
        position: fixed;
        border: 1px solid #0a2b1d;
        height:100%;
   }
   .inner-box{
        width: 200px;
        height: 100%;
        overflow-y: scroll;
        border: 1px solid #0A246A;
    }
    .tabs{
        border: 3px solid chartreuse;
        color:darkred;
    }
    .content-box p{
      height:50px;
      text-align:center;
    }

<div class="nav-box">
  <div class="inner-box">
    <div class="tabs"><p>Navbar content Start</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content End</p></div>
    </div>
</div>
<div class="content-box">
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
</div>

Link para jsFiddle:

Estou apresentando isso como uma solução alternativa, em vez de uma solução. Isso pode não funcionar o tempo todo. Fiz assim porque estou criando uma página HTML muito básica, para uso interno, em um ambiente muito bizarro. Eu sei que existem bibliotecas como MaterializeCSS que podem fazer barras de navegação realmente boas. (Eu ia usá-los, mas não funcionou com meu ambiente.)

<div id="nav" style="position:fixed;float:left;overflow-y:hidden;width:10%;"></div>
<div style="margin-left:10%;float:left;overflow-y:auto;width:60%;word-break:break-all;word-wrap:break-word;" id="content"></div>

Adicione isso ao seu código para altura fixa e adicione um pergaminho.

.fixedbox {
    max-height: auto;
    overflow-y: scroll;
}

Para o seu propósito, você pode apenas usar

position: absolute;
top: 0%;

e ainda pode ser redimensionável, rolável e responsivo.