blocks|key|3266304|text|使用overflow-y。此属性为CSS3。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3266305|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y^0|2|A|2|A|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y" rel="noreferrer"><code>overflow-y</code></a>. This property is CSS 3.

blocks|key|3266334|text|要隐藏水平滚动条，可以将overflow-x设置为隐藏，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3266335|overflow-x:+hidden;|code-block|syntax|javascript|3266336|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

to hide the horizontal scrollbars, you can set overflow-x to hidden, like this:

<pre><code>overflow-x: hidden;
</code></pre>

blocks|key|3052685|text|您需要在px中指定width和height|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3052686|width:+10px;+height:+10px;|code-block|syntax|javascript|3052687|此外，您还可以使用overflow:+auto;阻止显示水平滚动条。|3052688|因此，您可能希望尝试以下操作：|3052689|<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>|3052690|entityMap^0|4|2|9|5|F|6|0|0|9|F|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|Q|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|R|$]]

You need to specify the <code>width</code> and <code>height</code> in <code>px</code>:

<pre><code>width: 10px; height: 10px;
</code></pre>

In addition, you can use <code>overflow: auto;</code> to prevent the horizontal scrollbar from showing.

Therefore, you may want to try the following:

<pre><code>&lt;div style="width:100px; height:100px; overflow: auto;" &gt;
 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
&lt;/div&gt;
</code></pre>

blocks|key|3052751|text|首先谢谢你|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3052752|使用overflow:auto它对我很有效。|offset|length|style|CODE|3052753|水平滚动条消失。|3052754|entityMap^0|0|2|D|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

Thank you first

Use <code>overflow:auto</code> it works for me.

horizontal scroll bar disappears.

blocks|key|311995|text|对于任何情况，将overflow-x设置为hidden，我更喜欢设置max-height，以限制div高度的扩展。您的代码应该如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|311996|overflow-y:+scroll;
overflow-x:+hidden;
max-height:+450px;|code-block|syntax|javascript|311997|entityMap^0|8|A|L|6|Y|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

For any case set <code>overflow-x</code> to <code>hidden</code> and I prefer to set <code>max-height</code> in order to limit the expansion of the height of the div. Your code should looks like this:

<pre><code>overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;
</code></pre>

blocks|key|3052777|text|要在div中显示垂直滚动条，您需要添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3052778|height:+100px;+++
overflow-y+:+scroll;|code-block|syntax|javascript|3052779|或|3052780|height:+100px;+
overflow-y+:+auto;|3052781|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

To show vertical scroll bar in your div you need to add

<pre><code>height: 100px; 
overflow-y : scroll;
</code></pre>

or

<pre><code>height: 100px; 
overflow-y : auto;
</code></pre>

blocks|key|311956|text|overflow-y+:+scroll;
overflow-x+:+hidden;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|311957|height是可选的|unstyled|offset|length|style|CODE|311958|entityMap^0|0|0|6|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>overflow-y : scroll;
overflow-x : hidden;
</code></pre>

<code>height</code> is optional

blocks|key|312751|text|您可以使用overflow属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|312752|style="overflow:+scroll+;max-height:+250px;+width:+50%25;"|code-block|syntax|javascript|312753|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use the overflow property 

<pre><code>style="overflow: scroll ;max-height: 250px; width: 50%;"
</code></pre>

blocks|key|3052897|text|我也面临着同样的issue...try来做this...this为我工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3052898|++++++++.scrollBbar+
++++++++{
++++++++position:fixed;
++++++++top:50px;
++++++++bottom:0;
++++++++left:0;
++++++++width:200px;
++++++++overflow-x:hidden;
++++++++overflow-y:auto;
+++++++}|code-block|syntax|javascript|3052899|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I also faced the same issue...try to do this...this worked for me

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

blocks|key|3052907|text|这是我的组合：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3052908|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.|code-block|syntax|javascript|3052909|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is my mix:

<pre><code>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.
</code></pre>

blocks|key|3266649|text|有时这很有用:记住垂直滚动条占据水平空间。你可能有一个宽度:+100%25，内容太少而不能保证垂直滚动条的显示器。然后当你添加更多的内容时，你会得到垂直的滚动条--不出所料--但是当内容在div中包装它的溢出时，一个恼人的水平滚动条也会弹出来。原因是垂直滚动条本身占据了一些水平空间，而水平条的出现允许读者在垂直滚动条下滚动。解决这个问题的方法是缩短宽度。例如宽度:+95%25会删除水平条，只显示垂直条。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3266650|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Sometimes this helps:
Remember that the vertical scrollbar takes up horizontal space. You might have had a display that works well with width: 100% and too little content to warrant a vertical scrollbar. Then when you add more content, you get the vertical scrollbar - as expected - but while the content wraps its overflow in the div, an annoying horizontal scrollbar pops up too. The reason is that the vertical scrollbar itself take up some horizontal space, and the horizontal bar appear to allow the reader to scroll underneath the vertical scrollbar.
The way around this is to shorten the width. e.g width: 95% would remove the horizontal bar, showing only the vertical one.

I want to show terms and condition note on my website. I dont want to use text field and also dont want to use my whole page. I just want to display my text in selected area and want to use only vertical scroll-bar to go down and read all text.

Currently I am using this code:

<pre><code>&lt;div style="width:10;height:10;overflow:scroll" &gt;
 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
&lt;/div&gt;
</code></pre>

Two Problems:

<ol>
<li>It is not fixing the width and height and spread until the all text appears. </li>
<li>Second it is showing horizontal scroll-bar and I don't want to show it.</li>
</ol>

HTML: How to create a DIV with only vertical scroll-bars for long paragraphs?

我想在我的网站上显示条款和条件说明。我不想使用文本字段，也不想使用我的整个页面。我只想在选定的区域显示我的文本，并且只想使用垂直滚动条来向下阅读所有文本。目前，我正在使用以下代码：<div style="width:10;height:10;overflow:scroll" > text text text text text text text text text text text text

问HTML:如何为长段落创建只有垂直滚动条的DIV？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML:如何为长段落创建只有垂直滚动条的DIV？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML:如何为长段落创建只有垂直滚动条的DIV？
EN