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

所以我的问题是，我已经将我的视图设置为宽度&高度100％;它工作的很好，但一旦视图中的某些内容导致滚动条出现，它会滚动到空白处。就好像视图的溢出已隐藏，但内容仍在滚动页面。Angular JS - 查看滚动问题* CSS *

由于我需要多个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>

!!!!这是登录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

如何获得与其中的内容展开视图？

来源

2015-02-17 Eolis

解决方法之一是更改makeBackground类，如下所示： .makeBackground { position：absolute; top：0; 宽度：100％; **高度：200％; ** 最小宽度：100％;最小高度：100％; } 这使得内容跨越滚动，但现在它滚动得太远。我希望它能够检测到内容有多远......我认为这很容易解决;我的意思是几乎每个网页都做到了。我必须缺少一些基本的东西 – Eolis 2015-02-17 23:15:40

解决： 的问题是CSS。通过设置顶层容器溢出属性为隐藏并使用边距而不是位置：relative;像素调整我的内容现在适合页面。

来源

2015-02-18 18:49:56 Eolis

position：absolute;是你的朋友。

.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>

来源

2015-02-17 22:13:47 corn3lius

是的，但这只是在现场屏幕上显示我的问题。正如你所看到的，图像正在被视图切断。很可能是因为css中的宽度100％和高度100％意味着窗口大小的100％;而透明盒正在扩展内容并创建滚动，因此实际内容较大。那么如何使100％高度意味着100％包括卷轴？说实话，我认为绝对的位置，在这种情况下，不是我的朋友，因为它将页面结构拉出来，并导致高度的调整与预期不同。 – Eolis 2015-02-17 23:01:34

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

回答

相关问题