首页 > 解决方案 > 禁用媒体查询属性

问题描述

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

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

但是当屏幕宽度小于 400 像素时,我想禁用它。(例如,溢出-y:无。但溢出-y 没有)

有什么解决办法吗?

标签: css

解决方案


您可以只使用 ***overflow: auto;

然后它工作正常参见示例。

#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

- - 谢谢你 - -


推荐阅读