CODEWITHSUNDEEP
htmlcss
Meysam Naderi
Meysam Naderi

Reputation: 113

css menu the last item does not fit into view

I'm creating a menu and using (position:"absolute" & height:"100%") but does not respond to screen resize properly because of 50px space from top and the last item does not fit into view. and I don't want to make (top:"0"). Here is the 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>

The 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;
            }

and here is jsFiddle I created: http://jsfiddle.net/Meysam/dcPN8/

Upvotes: 0

Views: 107

Answers (2)

Meysam Naderi
Meysam Naderi

Reputation: 113

Thanks to @GCyrillus, I finally fixed it this way

.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;
     }

Here is the fixed version : http://jsfiddle.net/Meysam/dcPN8/9/

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105903

http://jsfiddle.net/dcPN8/5/ you can use box-sizing to include a padding at top of ul and height:100%; 

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

http://jsfiddle.net/dcPN8/2/ http://jsfiddle.net/dcPN8/5/ (added position:relative for .user-name )

Upvotes: 0

Related Questions