html - 在某些情况下，固定左侧菜单上的底部滚动按钮不可见

Question

我尝试使用固定的页眉、页脚、左侧菜单(可以滚动)和可以通过浏览器滚动滚动的内容部分来实现页面布局。布局快完成了，但我意识到左侧菜单滚动面板有问题。当我将浏览器尺寸更改为较小尺寸时，底部滚动按钮不可见，如图所示。

有人知道我该如何解决吗？

jsfiddle 代码:http://jsfiddle.net/76UZm/1/

HTML:

<div id="top-bar">
    <div id="topbar-inner">Top bar text</div>
</div>
<div id="left">
    <div id="left-header">
            <h3>Nice header</h3>

    </div>
    <div id="left-inside">
        <ul>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
            <li>menu item</li>
        </ul>
    </div>
</div>
<div id="mainouter">
    <p>Content start</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content end</p>
</div>
<div id="bottom">
    <div id="bottom-inner">Fixed Bottom</div>
</div>

CSS:

html, body {
    margin: 0;
    padding: 0;
}
#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 23px;
}
#topbar-inner {
    height: 23px;
    background: #bbb;
}
#mainouter {
    position: relative;
    z-index: 2;
    padding-top: 23px;
    padding-bottom: 40px;
    margin-left: 150px;
    background: #ccc;
    min-height: 100%;
}
#bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 20px;
}
#bottom-inner {
    height: 40px;
    background: #aaa;
}
#left {
    position: fixed;
    top: 8px;
    bottom: 30px;
    width: 149px;
}
#left-header {
    border-bottom: 2px solid blue;
    border-left: 2px solid blue;
    width: 120px;
    height: 20px;
}
#left-inside {
    overflow: auto;
    width: 120px;
    height: 95%;
    border-right: 2px solid blue;
}

Answer 1

减少#left-inside的高度百分比。您的 #bottom 部分 20px 与 #left-inside 重叠，height:95%; 必须补偿你的 window 高度。 试试下面的代码，你一定会明白的:

#left-inside {
溢出:自动；
宽度:120px；
高度:90%；//在“高度:95%；”之前我刚刚改变了这个。现在你可以看到底部的滚动按钮戳在那里......
右边框:2px 纯蓝色；
}