如何将 div 设置为视口百分比？

Question

我必须将 <div class="row" ng-repeat="..">..</div> 设置为视口的百分比减去一定数量的像素（由于 jQuery 或 LESS，这可能不会成为问题）。最大的问题是 ng-repeat.

在 jQuery、Angular 或 LESS 中有没有办法做到这一点？

编辑：最大的问题是 ng-repeat。

Answer 1

像Using jQuery To Get Size of Viewport

一样获取视口的width/height

然后

var percent = 0.5;
var pixelsToSubtract = 10;
var adjustedWidth =  ($(window).width()*percent - pixelsToSubract) + 'px';
var adjustedHeight =  ($(window).height()*percent - pixelsToSubract) + 'px';
$('.row').css({width:adjustedWidth, height:adjustedHeight});

Answer 2

这可以在没有 JavaScript 的情况下通过使用 CSS calc() and CSS vw 单位值来实现：

.row {
  width: calc(50vw - 60px);
}

50vw 对应于视口宽度的 50%。

如何将 div 设置为视口百分比？

How to set div to percentage of viewport?

jquery

less

angularjs