web-dev-qa-db-ja.com

HTML：長い段落のために垂直スクロールバーだけでDIVを作る方法は？

私は自分のウェブサイトに利用規約を表示したいです。私はテキストフィールドを使いたくないし、私のページ全体を使いたくもありません。選択した領域にテキストを表示し、すべてのテキストを下に移動して読むために垂直スクロールバーだけを使用したいのです。

現在私はこのコードを使っています：

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

2つの問題

  1. すべてのテキストが表示されるまで幅と高さを固定して広げるのではありません。
  2. 次に水平スクロールバーを表示していますが、表示したくありません。
csshtmloverflow
117
Awan

overflow-y を使用してください。このプロパティはCSS 3です。

212
janmoesen

水平スクロールバーを隠すには、次のようにoverflow-xをhiddenに設定します。

overflow-x: hidden;
56
Kornelius

widthにheightとpxを指定する必要があります。

width: 10px; height: 10px;

さらに、水平スクロールバーが表示されないようにするためにoverflow: auto;を使用できます。

したがって、次のことを試してみてください。

<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>
50
Daniel Vassallo

最初にありがとう

overflow:autoを使ってください。

水平スクロールバーが消えます。

18
raji

いずれにせよoverflow-xをhiddenに設定し、divの高さの拡大を制限するためにmax-heightを設定することを好みます。あなたのコードは次のようになります。

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

Divに垂直スクロールバーを表示するには、追加する必要があります

height: 100px;   
overflow-y : scroll;

または

height: 100px; 
overflow-y : auto;
13
Ricardo Romo
overflow-y : scroll;
overflow-x : hidden;

heightはオプションです

2
Amobi Chuks

Overflowプロパティを使うことができます

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

私も同じ問題に直面していました...これをやろうとしています...これは私のために働いた

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