HTML: Como criar um DIV com apenas barras de rolagem verticais para parágrafos longos?

136

Quero mostrar os termos e condições no meu site. Eu não quero usar o campo de texto e também não quero usar minha página inteira. Eu só quero exibir meu texto na área selecionada e quero usar apenas a barra de rolagem vertical para descer e ler todo o texto.

Atualmente, estou usando este código:

<div style="width:10;height:10;overflow:scroll" >
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
</div>

Dois problemas:

Não está fixando a largura e a altura e a propagação até que todo o texto apareça.
Segundo, está mostrando a barra de rolagem horizontal e não quero mostrá-la.

css html overflow

— Awan
fonte

O problema de largura / altura é resolvido por "Daniel Vassallo" e o problema da barra de rolagem horizontal é resolvido por "janmoesen". Agora quem é resposta que eu deveria aceitar :) I pode selecionar múltiplas;)

— Awan

238

Use overflow-y. Esta propriedade é CSS 3.

— janmoesen
fonte

O problema de largura / altura é resolvido por "Daniel Vassallo" e o problema da barra de rolagem horizontal é resolvido por "janmoesen". Agora quem é resposta que eu deveria aceitar :) I pode selecionar múltiplas;)

— Awan

21

Isso é bastante óbvio: sempre opte pelo oprimido, ou seja, aquele com a menor reputação. ;-)

— janmoesen 02/04/10

hahaha. Mas a sua resposta não é em detalhes como de "Daniel Vassallo" :)

— Awan

Esforço-me por "menos é mais" e deixo os links falarem. Enfim, basta escolher um e tenha um bom final de semana!

— precisa saber é o seguinte

14

Acredito que o padrão aqui é não responder a uma pergunta com "apenas" um link, pois os links podem se tornar inválidos. Você deve incluir informações suficientes para responder à pergunta diretamente na sua resposta e ter o link como referência.

— Jeffrey Harmon

66

para ocultar as barras de rolagem horizontais, você pode definir overflow-x como oculto, assim:

overflow-x: hidden;

— Kornelius
fonte

Eu sinto que esta é a resposta que o consulente queria ... você merece mais crédito

— Ian Sábio

52

Você precisa especificar widthe heightem px:

width: 10px; height: 10px;

Além disso, você pode overflow: auto;impedir a exibição da barra de rolagem horizontal.

Portanto, você pode tentar o seguinte:

<div style="width:100px; height:100px; overflow: auto;" >
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
</div>

— Daniel Vassallo
fonte

A largura e a altura estão funcionando agora, mas a barra de rolagem horizontal ainda não foi removida.

— Awan

O problema de largura / altura é resolvido por "Daniel Vassallo" e o problema da barra de rolagem horizontal é resolvido por "janmoesen". Agora quem é resposta que eu deveria aceitar :) I pode selecionar múltiplas;)

— Awan

19

Obrigado primeiro

Use overflow:auto-o funciona para mim.

barra de rolagem horizontal desaparece.

— raji
fonte

15

Para qualquer caso definido overflow-xcomo hiddene eu prefiro definir max-heightpara limitar a expansão da altura da div. Seu código deve ficar assim:

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;

— Brane
fonte

13

Para mostrar a barra de rolagem vertical em sua div, você precisa adicionar

height: 100px;   
overflow-y : scroll;

ou

height: 100px; 
overflow-y : auto;

— Ricardo Romo
fonte

2

Eu prefiro usar max-height: 100px;.

— Roman

Devido à minha configuração, era o heightque faltava, por isso não mostrava as barras de rolagem vertical, embora height:100%;funcionasse melhor para mim.

— SharpC

3

overflow-y : scroll;
overflow-x : hidden;

height é opcional

— Amobi Chuks
fonte

2

Você pode usar a propriedade overflow

style="overflow: scroll ;max-height: 250px; width: 50%;"

— Sunil Kumar
fonte

1

Eu também enfrentei o mesmo problema ... tente fazer isso ... isso funcionou para mim

        .scrollBbar 
        {
        position:fixed;
        top:50px;
        bottom:0;
        left:0;
        width:200px;
        overflow-x:hidden;
        overflow-y:auto;
       }

— singhkumarhemant
fonte

0

Esta é a minha mistura:

overflow-y: scroll;
height: 13em; // Initial height.
resize: vertical; // Allow user to change the vertical size.
max-height: 31em; // If you want to constrain the max size.

— Daniel De León
fonte