Angular JS - 视图滚动问题 CSS

Question

所以我的问题是我将视图设置为宽度和高度 100%；效果很好，但是一旦视图中的某些内容导致滚动条出现，它就会滚动到空白处。好像隐藏了视图的溢出但内容仍在使页面滚动。

我无法创建 fiddle，因为我需要多个 html 文件来加载和渲染视图，所以我会 post 一些关于这个问题的代码和图像，希望有人能理解问题。我怀疑这很可能是我定位系统的 CSS 问题，但我一直无法解决它。

::HTML::

！！！这是索引页

<!DOCTYPE html>
<html ng-app="appMain">
    <head>
        <title>MY APP</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >

        <!-- CSS imports -->
        <link href="css/style.css" rel="stylesheet" type="text/css" />

        <!-- JS imports -->
        <!-- Angular JS Primary Scripts -->
        <script src="scripts/angular.js"></script>
        <script src="scripts/angular-ui-router.js"></script>

        <!-- Angular JS subScripts for controllers etc. -->
        <script src="main.js" ></script>
    </head>

    <body>
        <div class="makeBackground" ui-view></div>
    </body>
</html>

!!!!这是标志-in.html页面：

<div class="loginBackground makeBackground"></div>
    <div class="transparentContainer">

</div>

::JS - 模块::

(function() {

var appMain = angular.module('appMain', ['ui.router']);

swiftMain.config(function($stateProvider, $urlRouterProvider) {

  // if url not defined redirect to login
  $urlRouterProvider.when('', "/sign-in");
  // if nonexistant url defined redirect to sign-in
  $urlRouterProvider.otherwise("/sign-in");

  // Now set up the states
  $stateProvider
    .state('sign-in', {
      url: "/sign-in",
      templateUrl: "templates/views/sign-in.html"
    });
});

}());

::CSS::

.makeBackground {
    position: relative; top: 0;
    width: 100%; height: 100%;
}
.geminiBlue {
    background-color: #074d77;
}
/* fancy 'e' bg on login background and courselist */
.loginBackground {
background-image: url(../images/login_back.png), url(../images/geminiBlue.png);
background-position: center top, left top;
background-repeat: no-repeat, repeat;
}

.transparentContainer {
    border-radius: 20px;
    background-color: rgba( 255,255,255,0.4 );
    width: 500px;
    height: 600px;
    position:absolute;
    z-index:15;
    top:50%;
    left:50%;
    margin:-300px 0 0 -250px;
}

上面的 CSS 表明 transparentContainer class 具有固定的宽度和高度，这将在较低的分辨率下创建滚动；但是视图允许滚动并隐藏内容，如下所示：

如何让视图随着其中的内容展开？

Answer 1

位置：绝对；是你的朋友。

.makeBackground {
    position: absolute; 
    top: 0;
    width: 100%; height: 100%;
}
.geminiBlue {
    background-color: #074d77;
}
/* fancy 'e' bg on login background and courselist */
.loginBackground {
background-image: url(http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png);
  background-color:#00D;  
  background-position: center top, left top;
  background-repeat: no-repeat, repeat;
}

.transparentContainer {
    border-radius: 20px;
    background-color: rgba( 255,255,255,0.4 );
    width: 70%;
    height: 70%;
    position:absolute;
    z-index:15;
    margin: 15%; /*-300px 0 0 -250px;*/
}

<div class="makeBackgrounnd" >
  <div class="loginBackground makeBackground">
    <div class="transparentContainer"> </div>
  </div>
</div>

Answer 2

已解决： 问题是 css。通过将顶级容器溢出属性设置为隐藏并使用边距而不是位置：相对；使用像素调整我的内容现在适合页面。

Angular JS - 视图滚动问题 CSS

Angular JS - View Scrolling Issue CSS

css

position

angularjs

Angular JS - 视图滚动问题 *CSS*

Angular JS - View Scrolling Issue *CSS*

css

position

angularjs

Angular JS - 视图滚动问题 CSS

Angular JS - View Scrolling Issue CSS