html文档滚动没有溢出

Question

我的文档高度中最外面的元素html标记设置为100％。 请注意，body标签的高度也是100％。

我认为这意味着文档的高度等于窗口的高度。

但是，文档仍然在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;
}

Answer 1

只是删除height:100%从#menu和#app_body 。 仅当页面上有很多内容时，滚动条才会显示。

html文档滚动没有溢出

问题描述

1 个解决方案

解决方案1
0 2014-06-24 00:27:29

html文档滚动没有溢出

问题描述

1 个解决方案

解决方案1 0 2014-06-24 00:27:29

解决方案1
0 2014-06-24 00:27:29