Question

我正在使用jQuery库Nanoscroller来获取滚动的内容div，如果它有很多内容，它就可以了。但是，我遇到的问题是浏览器窗口上还有一个主要的滚动按钮（即页面右侧的常规按钮）。

我想要的是标题位于顶部，页脚位于底部，内容总是占用浏览器窗口中剩余的任何可用高度。这样，唯一的滚动按钮将是内容div中的Nanoscroller按钮。我想要的是这样的：

Example 我正在使用的代码是：

<body>
<div id="container">
    <div id="header">
        header
    </div>

    <div id="mycontent" class="nano">
        <div class="content">
            my content
        </div>
    </div>

    <div id="footer">
        footer
    </div>
</div>
</body>

用这个css：

html, body {
margin: 0;
padding: 0;
}

#container {
    margin: 0;
}

#header {
    text-align:center;
    background: #777;
    color:#fff;
    height:50px;
}

#mycontent {
    background-color:red;
}

#footer {
    background-color:blue;
        clear:both;
        height: 50px;
}

我尝试了各种组合，使页眉和页脚的位置固定，高度设置为mycontent div的100％，但仍然没有快乐。我似乎总是在页面上有点过多，这样我就会出现那个主要的滚动条。

欢迎任何想法，谢谢。

Answer 1

改为使用position: fixed：

#footer {
    position: fixed;
    background-color: blue;
    width: 100%;
    height: 50px;
    bottom: 0;
}

body {
    overflow-y: hidden;

#mycontent {
    overflow-y: auto;
}

Answer 2

html, body {
 overflow:hidden;
}

如何制作一个没有主要垂直滚动条的窗口

2 个答案: