如果不需要CSS隐藏滚动条

本文翻译自：CSS hide scroll bar if not needed

I am trying to figure out how I can hide the overflow-y:scroll; 我试图找出如何隐藏overflow-y:scroll; if not needed. 如果不需要的话。 What I mean is that I am building a website and I have a main area which posts will be displayed and I want to hide the scroll bar if content does not exceed the current width. 我的意思是我正在建立一个网站，我有一个主要区域，将显示帖子，如果内容不超过当前宽度，我想隐藏滚动条。

Also, my second question. 另外，我的第二个问题。 I want to make it so when the posts exceed the current width, the width will increase automatically and the content won't go out of the box. 我想这样做当帖子超过当前宽度时，宽度会自动增加，内容不会开箱即用。

Does anyone have a clue how to do this? 有没有人知道如何做到这一点？

Posts area: 邮政区域：

.content {
    height: 600px;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    font-size: 15px;
    text-align: justify;
    line-height: 19px;
    overflow-y:scroll;
}

Main website container: 主网站容器：

.container {
    margin: 0 auto;
    width: 757px;
    margin-top: 30px;
    text-align: center;
}

---

#1楼

参考：https://stackoom.com/question/1GX6t/如果不需要CSS隐藏滚动条

---

#2楼

Set overflow-y property to auto , or remove the property altogether if it is not inherited. 将overflow-y属性设置为auto ，或者如果未继承该属性，则将其删除。

Here is a working example of both the problems solved. 以下是解决问题的一个实例。

---

#3楼

You can use overflow:auto; 你可以使用overflow:auto;

You can also control the x or y axis individually with the overflow-x and overflow-y properties. 您还可以使用overflow-x和overflow-y属性分别控制x轴或y轴。

Example: 例：

.content {overflow:auto;}
.content {overflow-y:auto;}
.content {overflow-x:auto;}

---

#4楼

You can use both .content and .container to overflow:auto. 你可以使用.content和.container来溢出：auto。 Means if it's text is exceed automatically scroll will come x-axis and y-axis. 意味着如果文本超出自动滚动将来到x轴和y轴。 (no need to give separete x-axis and y-axis commonly give overflow:auto) （无需给出separete x轴和y轴通常给出溢出：auto）

.content {overflow:auto;} .content {overflow：auto;}

---

#5楼

.container {overflow:auto;} will do the trick. .container {overflow：auto;}会做的。 If you want to control specific direction, you should set auto for that specific axis. 如果要控制特定方向，则应为该特定轴设置auto。 AE AE

.container {overflow-y:auto;} .container {overflow-x:hidden;} .container {overflow-y：auto;} .container {overflow-x：hidden;}

The above code will hide any overflow in the x-axis and generate a scroll-bar when needed on the y-axis.But you have to make sure that you content default height smaller than the container height; 上面的代码将隐藏x轴上的任何溢出并在y轴上需要时生成滚动条。但是你必须确保你的内容默认高度小于容器高度; if not, the scroll-bar will not be hidden. 如果没有，滚动条将不会被隐藏。