javascript - 如何将元素高度调整为另一个元素的高度?

标签 javascript angularjs css twitter-bootstrap-3

基于这个 fiddle https://jsfiddle.net/vuwgnfqw/1/ , textareas 的高度怎么可能是 flag 高度的 50%?这应该允许两个堆叠的文本区域与标志一样高。你看,如果视口(viewport)太窄,文本区域就会太高,如果视口(viewport)太宽,旗帜就会更高。

我使用了这段代码 how to set dynamically height to element?用 Angular 修改高度,但到目前为止它不是动态的,希望它在调整页面大小时自动相应地调整大小。基本上我犯了错误,将 DOM 操作添加到 Controller 只是为了看看它是否有效

.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>

这是有效的,但它不会随着页面大小的调整而自动刷新。

最佳答案

我将提供一个 javascript 解决方案(不是很多 Angular 专家)

  • 将名为 target 的类添加到 textarea 标记及其父级。
  • 同时对这些目标应用 overflow:hidden 属性(这是在窗口很小的情况下您将看不到溢出的内容)
  • 检测窗口调整大小并计算包含图像的 div 的宽度。
  • 计算宽度的一半并将其应用于您的目标

    fiddle here

  • 关于javascript - 如何将元素高度调整为另一个元素的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42987420/

    相关文章:

    html - 如何在新行中显示 <li> 元素的一半文本

    javascript - mousedown 没有调用我的函数

    javascript - JavaScript 中带有时间的对象

    javascript - 这段 JavaScript 代码中的 $super 和 $parent 是什么意思?

    javascript - Angular-UI( Bootstrap )弹出窗口不起作用?

    javascript - 如何分离不同页面的 CSS,以便仅在特定页面上加载所需的 css 属性?

    javascript - 持久性JS : Updating an existing database using migrate()

    angularjs - 确保 DOM 更改在转换之前完成

    javascript - 如何获取指令中的属性参数

    javascript - 在html页面上用按钮覆盖图像