ng-include拉伸页面高度 - 如何使普通列与ng-include区域的高度相同？

Question

在我的Angular应用中，我使用ng-include在我的页面中包含一个动态添加内容的模板。会发生什么事情，这个区域变得比它所居住的html和body元素更长。

Here's the JSFiddle

＆＃13;

＆＃13;

html,
body {
  height: 100%;
}
#main {
  height: 100%
}
#left {
  background-color: grey;
  height: 100%;
}
#right {
  background-color: yellow;
  height: 100%
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div id="main" class="row">
  <div id="left" class="col-sm-6 col-xs-6">
    <div id="sidebar">
      <p>Item 1</p>
      <p>Item 2</p>
      <p>Item 3</p>
      <p>Item 4</p>
      <p>Item 5</p>
    </div>
  </div>
  <div id="right" class="col-sm-6 col-xs-6">
    <div id="somethingLong">
      <div id="bigItem">
        <h2> My big Car </h2>

      </div>
      <div id="bigItem">
        <h2> My big house </h2>

      </div>
      <div id="bigItem">
        <h2> My big Paycheck </h2>

      </div>
      <div>
        <div ng-include src="'template.html'"></div>
      </div>
    </div>
  </div>
</div>
<!-- template -->
<script type="text/ng-template" id="template.html">
  <div>
    <h1>Angular Script</h1>
  </div>
  <div>
    <h1>Angular Script</h1>
  </div>
  <div>
    <h1>Angular Script</h1>
  </div>
  <div>
    <h1>Angular Script</h1>
  </div>
</script>

＆＃13;

＆＃13;

＆＃13;

如何使我的left侧边栏与right侧边栏一样长？

Answer 1

问题与angularjs无关，而是由此引导程序的bug，它为行类创建了以下CSS：

.row {
  margin-right: -15px;
  margin-left: -15px;
}

如果你添加：

.row {
  margin-right: 0px;
  margin-left: 0px;
}

问题解决了。

更新了jsfiddle