Question

所以我的问题是我把我的观点设定为宽度和宽度。身高100％;效果很好但是一旦视图中的某些内容导致滚动条出现，它就会滚动到空白区域。好像隐藏了视图的溢出但内容仍在使页面滚动。

由于我需要多个html文件来加载和渲染视图，因此我无法制作一个小提琴，因此我会发布一些有关该问题的代码和图像，希望有人可以解决问题。我怀疑它很可能是我的定位系统的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>

!!!!这是sign-in.html页面：

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

</div>

:: JS - Module ::

(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类具有固定的宽度和高度，将以较低的分辨率创建滚动;但是视图允许滚动并隐藏内容，如下所示： enter image description here

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

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。通过将顶级容器overflow属性设置为hidden并使用margin而不是position：relative;使用像素调整我的内容现在适合页面。

Angular JS - 查看滚动问题* CSS *

2 个答案: