AngularJS根据父元素的宽度调整宽度

Question

我正在使用AngularJS和Bootstrap，有以下结构：

<parent-div>
  <flexible-width-component 
            class="pull-left" 
            style="display: inline-block; min-width: 700px;">Data grid with many columns
  </flexible-width-component>
  <fixed-width-component 
            class="pull-right" 
            style="width:400px; display: inline-block">
  </fixed-width-component>
</parent-div>

我希望我的 flexible-width-component 能够自动填充与 fixed-width-component 之间的空隙，适用于任何宽度大于 1200px 的分辨率。两个组件需要相邻显示。

非常感谢您提供的任何建议！

- user90766

---

尝试使用min-width、max-width和媒体查询，但没有帮助。 - user90766

如果我没有固定宽度组件，我会使用百分比来设置div的宽度或者使用Bootstrap的脚手架类。 - user90766

弹性盒子（flexbox）是一种选项吗？ - hitautodestruct

@hitautodestruct，它仍未标准化，因此我不太舒服使用它，并且在采用flexbox之前更喜欢其他选项。 - user90766

请见下方我的答案。 - hitautodestruct

Answer 1

你可以获取父级容器的 offsetWidth 并从中减去你的固定宽度：

var example = angular.module('exmp', []);

example.directive('flexibleWidth', function() {
    return function(scope, element, attr) {

      // Get parent elmenets width and subtract fixed width
      element.css({ 
        width: element.parent()[0].offsetWidth - 400 + 'px' 
      });

    };
});

以下是 演示 的内容

- hitautodestruct

Answer 2

我知道回答这个问题已经很晚了，但它可能对其他人有帮助。

在 jsfiddle 上工作。

<div class="parent border">
  <div class="fixed-component border">
    Fixed Component
  </div>
  <div class="flexible-component border">
    flexible component
  </div>
</div>


<style>
.parent {
  height: 100px;
  display: flex;
}

.flexible-component {
  flex: 1;
}

.fixed-component {
  width: 100px;
}
.border {
  border: 1px solid black;
}
</style>

- Akash Babu