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 *

回答

相關問題