html - css 菜单最后一项不适合 View

Question

我正在创建一个菜单并使用 (position:"absolute"& height:"100%") 但由于距离顶部有 50 像素的空间并且最后一项不适合 View ，因此无法正确响应屏幕大小调整。而且我不想制作(顶部:“0”)。这是 HTML:

<section class="sidebar">
        <div class="user-name">
            <img src="/" alt="user-name" />
            <span>User Name</span>
        </div>
        <nav class="menu-list">
            <ul>
                <li>
                    <a href="#">
                        <i>☺</i>
                        <span>Coffee Bourse</span>
                    </a>
                </li>
                <li class="current">
                    <a href="#">
                        <i>☺</i>
                        <span>Coffee Bourse</span>
                    </a>
                    <ul>
                        <li>
                            <a href="#">
                                <span>fghjk</span>
                            </a>
                        </li>
                        <li class="active">
                            <a href="#">
                                <span>fghjk</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>fghjk</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <i>☺</i>
                        <span>Coffee Bourse</span>
                    </a>
                </li>
                <!-- some other lis here -->
                <li>
                    <a href="#">
                        <i>☺</i>
                        <span>End</span>
                    </a>
                </li>
            </ul>
        </nav>
    </section>

CSS:

.sidebar {
            background: #333;
            position: fixed;
            width: 200px;
            height: 100%;
            right: 0;
            top: 0;
    direction:rtl;

        }

.menu-list {
            margin-top: 5px;
        }
            .menu-list ul{
                position:absolute;
               width:100%;
               height:100%;
               overflow:hidden;
            }
            .menu-list ul:hover{
                overflow:auto;
            }

这是我创建的 jsFiddle: http://jsfiddle.net/Meysam/dcPN8/

Answer 1

感谢@GCyrillus，我终于以这种方式修复了它

.menu-list ul {
         position:absolute;
         width:100%;
         height:100%;
         /* fix */
         /* top:0;
         padding-top:1.5em; */
         box-sizing:border-box;
         padding-bottom:55px;
         /* end fix */
         overflow:hidden;
     }

这是固定版本: http://jsfiddle.net/Meysam/dcPN8/9/