在媒体查询上禁用属性

时间:2018-07-14 09:59:21

标签: css

我用纯html / css制作了一些网站。

我定义了溢出-y:浏览器全屏时滚动到某个元素。

但是当屏幕的宽度小于400px时,我想禁用它。 (例如,overflow-y:没有。但是overflow-y没有任何东西)

对此有什么解决办法吗?

1 个答案:

答案 0 :(得分:0)

您只能使用***溢出:自动;

然后正常工作,请参见示例。

#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 200px;
    height: 200px;
    overflow: scroll;
    border: 1px solid #ccc;
}
#overflowauto {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 200px;
    height: 200px;
    overflow: auto;
    border: 1px solid #ccc;
}
<h2>overflow scroll</h2>
<div id="overflowTest">This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>

<h2>overflow auto</h2>
<div id="overflowauto">This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt property-on-media-query# laoreet dolore magna aliquam erat volutpat. </div>

您可以了解有关溢出属性https://www.w3schools.com/css/css_overflow.asp

的更多信息

---谢谢---