y滚动溢出，子溢出

时间：2019-03-13 16:53:16

标签： html css

我有一个div（父级），宽度为300px，高度为100％，y溢出：滚动。 在父div的内部，我有一个子div，该子div呈现了一个角度分量。当前，组件（子代）在父代内部溢出。但我希望它能胜任一切。

当前工作样本 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Angular accoridon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <style></style>
  </head>
  <body ng-app="app" ng-controller="controller">
    <div style="overflow-y: scroll;width: 300px;height: 500px">
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>
        <input type="text" ng-model="searchTerm" />
        <div ng-if="searchTerm" style="width: 500px;">
          <div
            ng-click="onClick(item)"
            ng-repeat="item in items | filter: searchTerm"
            style="background: lightgray; padding: 20px;margin: 5px 0px;"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
      <div>Hello World!!</div>
      <div>Hello World!!</div>
    </div>
    <script>
      angular.module('app', []).controller('controller', function($scope) {
        $scope.searchTerm = '';
        $scope.items = [
          {name: 'First'},
          {name: 'Second'},
          {name: 'Third'},
          {name: 'Fourth'},
          {name: 'Fifth'},
          {name: 'Sixth'},
          {name: 'Seventh'},
          {name: 'Eighth'},
          {name: 'Ninth'},
          {name: 'Tenth'},
          {name: 'Eleventh'},
          {name: 'Twelth'},
          {name: 'Thirteenth'},
          {name: 'Fourteenth'},
          {name: 'Fifteenth'},
        ];
        $scope.onClick = function(item) {
          console.log(item.name);
          $scope.searchTerm = '';
        };
      });
    </script>
  </body>
</html>

必填：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Angular accoridon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <style></style>
  </head>
  <body ng-app="app" ng-controller="controller">
    <div style="overflow-y: scroll;width: 300px;height: 500px">
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>
        <input type="text" ng-model="searchTerm" />
        <div ng-if="searchTerm" style="width: 500px;position: fixed">
          <div
            ng-click="onClick(item)"
            ng-repeat="item in items | filter: searchTerm"
            style="background: lightgray; padding: 20px;margin: 5px 0px;"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
    </div>
    <script>
      angular.module('app', []).controller('controller', function($scope) {
        $scope.searchTerm = '';
        $scope.items = [
          {name: 'First'},
          {name: 'Second'},
          {name: 'Third'},
          {name: 'Fourth'},
          {name: 'Fifth'},
          {name: 'Sixth'},
          {name: 'Seventh'},
          {name: 'Eighth'},
          {name: 'Ninth'},
          {name: 'Tenth'},
          {name: 'Eleventh'},
          {name: 'Twelth'},
          {name: 'Thirteenth'},
          {name: 'Fourteenth'},
          {name: 'Fifteenth'},
        ];
        $scope.onClick = function(item) {
          console.log(item.name);
          $scope.searchTerm = '';
        };
      });
    </script>
  </body>
</html>

我能够使它在正确的位置上工作：固定，结果在顶部，但是如果我开始滚动父级，则结果将保持在原处（固定不变）并且不会停留在输入。 预期的行为是，它们应坚持父级滚动条上的输入文本框，并且结果必须在顶部。

1 个答案:

答案 0 :(得分：0)

使用CSS定位来正确放置元素。请查看以下链接以了解您的选项https://www.w3schools.com/css/css_positioning.asp。

在下面的修改后的代码段中，第一个文本框出现在div顶部，位置为：固定。即使滚动页面，它也将保持不变。

但是，位于底部的第二个texbox的位置是绝对的，相对于您的父容器（即您的父div）而言，它的位置是绝对的。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Angular accoridon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <style></style>
  </head>
  <body ng-app="app" ng-controller="controller">
    <div style="overflow-y: scroll;width: 300px;height: 500px">
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div style="position:absolute; bottom:0">
        <input type="text" ng-model="searchTerm" />
        <div ng-if="searchTerm" style="width: 500px;position: fixed">
          <div
            ng-click="onClick(item)"
            ng-repeat="item in items | filter: searchTerm"
            style="background: lightgray; padding: 20px;margin: 5px 0px;"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div style="position:fixed; top:0">
        <input type="text" ng-model="searchTerm" />
        <div ng-if="searchTerm" style="width: 500px;position: fixed">
          <div
            ng-click="onClick(item)"
            ng-repeat="item in items | filter: searchTerm"
            style="background: lightgray; padding: 20px;margin: 5px 0px;"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
      <div>Hello World!!</div>
    </div>
    <script>
      angular.module('app', []).controller('controller', function($scope) {
        $scope.searchTerm = '';
        $scope.items = [
          {name: 'First'},
          {name: 'Second'},
          {name: 'Third'},
          {name: 'Fourth'},
          {name: 'Fifth'},
          {name: 'Sixth'},
          {name: 'Seventh'},
          {name: 'Eighth'},
          {name: 'Ninth'},
          {name: 'Tenth'},
          {name: 'Eleventh'},
          {name: 'Twelth'},
          {name: 'Thirteenth'},
          {name: 'Fourteenth'},
          {name: 'Fifteenth'},
        ];
        $scope.onClick = function(item) {
          console.log(item.name);
          $scope.searchTerm = '';
        };
      });
    </script>
  </body>
</html>

相关问题
最新问题