Question

在向ui-router元素添加类时，我遇到了一个非常奇怪的错误。在添加活动类时，跨越整个视图的绝对定位元素将捕捉到其父级的宽度。

我在找到here

的弹药中重新创建了这个错误

我的代码看起来像这样：

的index.html

<body ng-controller="MainCtrl">
    <header>
      <span ng-click="toggleNav()">☰</span>
    </header>
    <nav ng-class="{active: navOpen}">
      <ul>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
      </ul>
    </nav>
    <section class="container" ui-view ng-class="{active: navOpen}"></section>
</body>

style.scss

nav {
  position: absolute;
  width: 100px;
  height: 100%;
  top: 25px;
  left: 0;
  background: gold;
  transform: translateX(-100px);
  transition: all .5s linear;
  &.active {
    transform: translateX(0);
  }
}

.container {
  width: 90%;
  margin: 0 auto;
  padding: 60px 0;
  transition: all .5s linear;
  &.active {
    transform: translateX(100px);
  }
  div {
    @extend header;
    height: auto;
    top: 25px;
    background: deepskyblue;
    padding: 10px;
    section {
      width: 90%;
      margin: 0 auto;
      span:last-child {
        float: right;
      }
    }
  }
}

app.coffee

app = angular.module 'plunker', ['ui.router']

app.config ($stateProvider) ->
    $stateProvider
      .state 'foo',
        url: ''
        templateUrl: 'foo.html'

app.controller 'MainCtrl', ($scope) ->
  $scope.navOpen = false

  $scope.toggleNav = ->
    $scope.navOpen = !$scope.navOpen

非常感谢任何帮助！

解决：将宽度和自动边距更改为左右填充5％

Answer 1

将overflow: hidden添加到正文：

body{
  overflow: hidden;
}

摆脱容器上的width: 90%：

.container {
  margin: 0 auto;
  padding: 60px 0;
  transition: all .5s linear;
}

Answer 2

我个人试图避免使用position：absolute。它掩盖了页面中元素的行为。在这种情况下，它更难以看到.ng-scope为您的body元素添加了一个边距。删除：100％;你会发现双方都添加了奇怪的额外空间。

您可以通过覆盖ng-scope类来解决它。添加

.ng-scope {margin：0; }

到style.css的底部

为什么添加带有Angular的类似乎会影响定位

2 个答案: