如何将元素高度调整为另一个元素的高度？

Question

基于这个小提琴https://jsfiddle.net/vuwgnfqw/1/ ，textareas 的高度怎么能是旗帜高度的 50%？ 这应该允许堆叠的文本区域与标志一样高。 您会看到，如果视口太窄，则文本区域太高，如果视口太宽，则标志会更高。

我用这段代码如何动态设置元素的高度？ 用角度修改高度，但到目前为止它不是动态的，如果页面调整大小，希望它相应地自动调整大小。 基本上我犯了罪向控制器添加 DOM 操作只是为了看看它是否有效

.controller('main', ['$scope', function ($scope) {
    var element = angular.element(document.querySelector('#flag'));
    $scope.height = element[0].offsetHeight;
}]);

在 HTML 中

<textarea class="playerName" rows="1" placeholder="APELLIDO" ng-style="{height: (height/2)-10 + 'px'}"></textarea>

这奏效了，但它不会随着页面大小调整而自动刷新。

Answer 1

我将提供一个 javascript 解决方案（不是很多角度专家）

将名为target的类添加到 textarea 标签及其父级。

还对这些目标应用overflow:hidden属性（这是在窗口很小的情况下，您将看不到溢出内容）

检测窗口调整大小并计算保存图像的 div 的宽度。

计算宽度的一半并将其应用于您的目标

在这里摆弄