Div ver barra de rolagem mostrar

87

Estou imaginando como é possível mostrar permanentemente a barra vertical de uma div (esmaecida se não houver rolagem) semelhante às nossas barras normais. Basicamente, estou tentando colocar um site inteiro em uma div (como gmail / facebook), então se a página não for longa o suficiente, a página inteira muda por causa da falta da barra de rolagem vertical.

Eu preciso de uma solução para este problema. Tentei overflow-y: scroll. Mas não parece funcionar.

html css

— Alec Smart
fonte

182

Em qual navegador você está testando?

Que tipo de DOCT você definiu?

Como exatamente você está declarando seu CSS?

Tem certeza de que não perdeu um ;antes / depois do overflow-y: scroll?

Acabei de testar o seguinte no IE7 e Firefox e funciona bem

<!-- Scroll bar present but disabled when less content -->
<div style="width: 200px; height: 100px; overflow-y: scroll;">
  test
</div>

<!-- Scroll bar present and enabled when more contents -->        
<div style="width: 200px; height: 100px; overflow-y: scroll;">
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
</div>

Expandir snippet

— Eoin Campbell
fonte

Também testado no IE7 e FireFox, e apenas <div style = "overflow-y: scrol"> Hello </div> funciona.

— Staale

1

esta é a folha de estilo que estou usando: #main_container {width: 100%; cor de fundo: #eeeeee; overflow-y: scroll; altura: 100%; posição: absoluta; }

— Alec Smart

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // PT" " w3.org/TR/html4/loose.dtd ">

— Alec Smart

ah, está funcionando agora ... obrigado ... por acaso coloquei uma tag de estilo dizendo overflow: auto na div, que substituiu meu css externo ...

— Alec Smart

30

Você já tentou overflow-y:auto? Não é exatamente o que você deseja, pois a barra de rolagem aparecerá apenas quando necessário.

— kgiannakakis
fonte

29

Sempre: se você sempre quiser uma barra de rolagem vertical, useoverflow-y: scroll;

jsFiddle:

<div style="overflow-y: scroll;">
......
</div>

Quando necessário : se você quiser a barra de rolagem vertical apenas quando necessário, use overflow-y: auto;(Você precisa especificar uma altura neste caso)

jsFiddle:

<div style="overflow-y: auto; height:150px; ">
....
</div>

— Razan Paul
fonte