Question

我正在使用带有自定义搜索模板的Angular Typeahead，并且由于某种原因，当我将其宽度设置为“100％”时，自定义模板不会响应。

我也尝试使用jQuery来改变高度，但它也不会对此做出响应，这让我有了为我需要的每个宽度创建媒体查询的最后选择。

我正在使用SASS，我的问题是：有没有办法在不使用“100％”属性的情况下将div的宽度设为100％？

我的代码如下所示：

<script type="text/ng-template" id="customTemplate.html">
<a class = "searchTemplate">
    <span ng-bind-html="match.model.name | typeaheadHighlight:query"></span><br>
    <span ng-bind-html="match.model.ticker | typeaheadHighlight:query"></span>
</a>
</script>

使用SASS / CSS：

.searchTemplate {
  @media screen and (min-width: $break5) {
    width: 500px;
  }

  @media screen and (min-width: $break4) and (max-width: $break5) {
    width: 500px;
  }

  @media screen and (min-width: $break3) and (max-width: $break4) {
    width: 400px;
  }

  @media screen and (min-width: $break2) and (max-width: $break3) {
    width: 300px;
  }

  @media screen and (min-width: $break1) and (max-width: $break2) {
    width: 200px;
  }
}

不工作SASS / CSS：

.searchTemplate {
  width: 100%;
}

请帮我解决这个问题。

Answer 1

试试这个css：

left:0;
right:0;

全宽而不使用“100％”属性

1 个答案: