我正在尝试建立一个网站,其中包含许多宽度和高度相等的盒子。例如,我有一个页面,其中并排有2个相等大小的框。
简单的解决方案是将宽度和高度设置为50vw。除非有滚动条,否则效果很好。我已经在Google上搜索了几个小时,无法理解为什么大众和大众在滚动条中将滚动条作为视口的一部分。
这是我的问题的样本
HTML
<div class="container"> <div class="box red"></div> <div class="box green"></div> </div> <div class="lotta-content"></div>
CSS
body { margin: 0; padding: 0; } .container { width: 100vw; } .box { float: left; width: 50vw; height: 50vw; } .red { background-color: red; } .green { background-color: green; } .lotta-content { height: 10000px; }
注意不需要的水平滚动条
一种可能的解决方案是对宽度使用百分比,对高度使用vw,但这永远不会是一个完美的盒子,这并不是世界上最糟糕的事情,但仍然不是理想的。这是一个样本
有谁知道为什么vw /vh在视口中包含滚动条?另外,如果有人有比我更好的解决方案,我很想听听。我正在寻找一个纯CSS解决方案。我宁愿没有javascript。
如果视口单位不 包括 原因滚动条,但毕竟是显示尺寸(屏幕),这将很方便。不过,请使用伪元素查看此解决方案:
在您的示例中也使一个正方形:
.box { float: left; width: 50%; } .box::before { content: ""; display: block; padding-top: 100%; }
编辑-如果有人想知道这为什么起作用(垂直填充响应原始元素的宽度)…基本上就是在规范中对其进行定义的方式:
即使对于“ padding-top”和“ padding-bottom”,该百分比也是相对于所生成的框的包含块的宽度计算的。
遇到我自己的答案后,我认为它需要一些改进。语义上的歧义是为什么我在顶部用“ cause”代替“ include”一词。因为更多的事实是vw单位仅考虑了视口的大小- 不 包括任何滚动条并在其宽度加到其他方向时 _导致_溢出和在另一个方向上的滚动条100vw(使得视口所需的总空间加上滚动条的宽度超过屏幕)。
vw
100vw
就像这里的问题一样,处理vw单元的最佳方法是尽可能避免使用它们,因为它们与桌面浏览器(没有覆盖的滚动条)不太兼容。
我编辑了包含CSS变量的想法,但是看起来还是很希望。