相关疑难解决方法(0)

我希望能够滚动整个页面,但不显示滚动条.

在谷歌浏览器中它是:

::-webkit-scrollbar {
    display: none;
}

但是Mozilla Firefox和Internet Explorer似乎并没有那样工作.

我也在CSS中尝试过这个:

overflow: hidden;

这确实隐藏了滚动条,但我不能滚动了.

有什么办法可以删除滚动条,同时还能滚动整个页面吗？请使用CSS或HTML.

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.

是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？

我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.

我刚刚了解了一个新的,不常见的CSS单元.vh并分别vw测量视口高度和宽度的百分比.

我从Stack Overflow看了这个问题,但它使单位看起来更相似.

vw和vh单元如何工作

答案具体说明了

vw和vh分别是窗口宽度和高度的百分比:100vw是宽度的100%,80vw是80%等.

这看起来与%单位完全相同,这更常见.

在Developer Tools中,我尝试将值从vw/vh更改为%而反之亦然,并获得相同的结果.

这两者有区别吗？如果没有,为什么要引入这些新单位CSS3？

我有一组元素,要求它们的最小宽度等于它们的高度,但未明确设置高度.目前我可以min-width通过jQuery 设置css 属性来实现这一点:

$(document).ready
(
    function()
    {
        $('.myClass').each
         (
             function() {$(this).css('min-width', $(this).css('height'));}
         );
    }
);  

是否可以直接在css中指定此行为？

这是一个展示我想要实现的目标:http://jsfiddle.net/p8PeW/

我正在尝试创建由正方形组成的网格/布局.每行四个方格.正方形不能在屏幕大小调整上扭曲.宽度和高度必须始终相同(我不想要固定值).我必须使用CSS网格.谁能帮我 ？

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

我想做的是创建几个水平对齐的彩色框。

<div class="outer">
  <div class="bg bg1">
  </div>
  <div class="bg bg2">
  </div>
  <div class="bg bg3">
  </div>
  <div class="bg bg4">
  </div>
</div>

--> Codepen 上的完整代码

几个事实：

1. 外层的position：relative
2. 背景position：absolute
3. leftbg1 到 bg4 不同

如果我将“outer”的宽度设置为100vw，一切都会好起来的。

但如果它大于100vw，例如101vw，就会有一点额外的空间我可以向下滚动（奇怪的是，没有垂直滚动条）。

如果是 300vw，我可以看到从左到右三个框，就会出现垂直滚动条。

所以我的问题是：

为什么宽度会影响垂直滚动条？

如果无法避免这种情况，还有其他方法可以实现我的想法吗？（我想创建多个div不是一个好方法）