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

【问题标题】：How to set div to percentage of viewport?如何将 div 设置为视口的百分比？
【发布时间】：2015-08-03 04:25:03
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

这个解决方案很简单。谢谢！

【解决方案2】：

像Using jQuery To Get Size of Viewport一样获取视口的宽度/高度

然后做

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});

【讨论】：

感谢您的回答，但如果我将常用的 jQuery 代码放在一个 .js 文件中并在 html 上引用它，它会在 angluar 通过ng-repeat 之前被调用。时机是问题。
@LukasDörig，即使您像 $(document).ready(function(){...}); 一样将代码放入文档准备好？
非常抱歉，我错过了您对 .css({..}); 所做的事情。现在可以了。谢谢！我尝试直接选择元素，而不是设置css。