html文檔沒有溢出滾動

我的文檔高度中最外面的元素html標籤設置爲100％。請注意，身體標籤的高度也是100％。html文檔沒有溢出滾動

我假設文檔的高度等於窗口的高度。

但是，文檔仍然在Y軸上滾動一點。我的文檔高度是1049.550px，而我的窗口高度是1049px。如果我滾動到窗口的底部，窗口的scrollY是63px。

我不想將我的文檔設置爲隱藏狀態，因爲那麼我在文檔的絕對底部放置的內容會被截斷。

我正在使用Chrome瀏覽器。我也嘗試在Safari。

這裏是我的index.html

<!doctype html> 
<html lang="en" ng-app="my-app" style="height: 100%;"> 
<head> 
    <meta charset="utf-8"> 
    <title>my-app</title> 
    <link rel="stylesheet" href="css/bootstrap.css"/> 
    <link rel="stylesheet" href="css/app.css"/> 
    <link rel="stylesheet" href="css/main.css"/> 
</head> 
<body id="app_body"> 
    <div id="fb-root"></div> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script src="js/auth.js"></script> 

    <div id="menu"> 
    <ul style="list-style-type: none;"> 
     <li id="nav_close_menu_icon"><img src="./img/menu_icon.png" onclick="hideMenu()"/></li> 
    </ul> 
    <div class="clear"></div> 
    <ul id = "menu_options"> 
     <li id="logout_option" onclick="toggleFbAuthorizationStatus(); hideMenu();"><img id="logout_icon" src="./img/logout_icon.png"/>Logout</li> 
    </ul> 
    </div> 

    <ul class="nav"> 
    <li><img id="nav_icon" src="./img/icon.png"/></li> 
    <li id="nav_open_menu_icon"><img src="./img/menu_icon.png" onclick="showMenu()"/></li> 
    <li id="nav_create_hangout_icon"><img onclick="goTo('create_hangout')" src="./img/create_hangout_icon.png"/></li> 
    </ul> 

    <div id="template_container" style="height: 100%" ui-view></div> 
    <!-- In production use: 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> 
    --> 
    <script src="js/dynamic-ui.js"></script> 
    <script src="js/ui.js"></script> 
    <script src="js/bootstrap.js"></script> 
    <script src="lib/angular/angular.js"></script> 
    <script src="lib/angular/angular-route.js"></script> 
    <script src="lib/angular-ui-router.js"/> 
    <script src="https://cdn.goinstant.net/v1/platform.min.js"></script> 
    <script src="https://cdn.goinstant.net/integrations/goangular/latest/goangular.min.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/services.js"></script> 
    <script src="js/controllers.js"></script> 
    <script src="js/filters.js"></script> 
    <script src="js/directives.js"></script> 
</body> 
</html>

，這裏是它的主要樣式表的main.css

#app_body { 
    background-color: #178DBA; 
    background-image: url('/2048.jpg'); 
    height: 100%; 
} 

.nav { 
    display: block; 
    background-color: #363636; 
    list-style-type: none; 
    height: 6%; 
    /*border-bottom: 0.1em solid #CCCCCC;*/ 
    margin-bottom: 0em; 
    padding: 0 0 0em; 
    box-shadow: 0px 3px 5px #191919; 
} 

.clear { 
    clear: both; 
} 

.center_horizontal { 
    margin-right: auto; 
    margin-left: auto; 
} 

#menu { 
    position: absolute; 
    right: 0px; 
    z-index: 10; 
    height: 100%; 
    background-color: #272727; 
    display: none; 
    box-shadow: -1px 0px 5px #191919; 
} 

#menu_options { 
    background-color: #272727; 
    list-style-type: none; 
    color: #FFFFFF; 
    -webkit-user-select: none; 
    font-weight: 200; 
} 

#menu_options li { 
    height: 56px; 
} 

#logout_icon { 
    width: 50px; 
    height: 50px; 
    margin-right: 5px; 
    vertical-align: middle; 
} 

#logout_option { 
    display: none; 
} 

.nav > li { 
    display: inline; 
} 

#nav_icon { 
    margin-left: 2% 
} 

#nav_open_menu_icon { 
    float: right; 
    margin-right: 3%; 
} 

#nav_close_menu_icon { 
    float: right; 
} 

#nav_create_hangout_icon img { 
    display: none; 
    margin-right: 5%; 
    float: right; 
}

來源

2014-06-24 Orca Ninja

您是否嘗試刪除身體標記的邊距？ –

我剛用過鍍鉻元素檢查器。我的身體標記沒有任何餘量。 –

在樣式檢查器中沒有看到這個規則？ http://i5.minus.com/jL5c0g4LAyNpV.PNG –

距離#menu和#app_body刪除height:100%。只有當頁面上有很多內容時，滾動條纔會顯示。

來源

2014-06-24 00:27:29

讓我們假設我有充分的理由爲100％。我能從那裏做什麼？ –

這是什麼原因？ –

我有一個簡短的聊天框，位於頁面底部，並且有一個消息線程佔用了其餘的高度。他們相對於身體，他們的容器大小。 –

html文檔沒有溢出滾動

回答

相關問題