右栏菜单和内容向下移动

I have created a right menu bar with css and hml. It is appearing like this:

我用css和hml创建了一个正确的菜单栏。它看起来像这样:

And when small screen is like this:

当小屏幕是这样的:

1. I don't want this. My working code is here.

我不想要这个。我的工作代码就在这里。

2. I want a scroll bar y and 100% height.

   我想要一个滚动条y和100%的高度。

   <div id="1map">
       <div class="rightcontainer">
           <div class="menubox">
               <div class="item">Menu-1</div>
               <div class="item">Menu-2</div>
               <div class="item">Menu-3</div>
           </div>
           <div class="mainbox">
               <div class="panel panel-success">
                   <div class="panel-heading">Products</div>
                   <div class="panel-body">
                       <ul class="list-group">
                           <li class="list-group-item">Toshiba Notebook</li>
                           <li class="list-group-item">Asus Notebook</li>
                           <li class="list-group-item">Prod-4</li>
                           <li class="list-group-item">Prod-5</li>
                           <li class="list-group-item">Prod-6</li>
                           <li class="list-group-item">Prod-7</li>
                       </ul>
                   </div>
               </div>
               <div class="panel panel-primary">
                   <div class="panel-heading">Toshiba Details</div>
                   <div class="panel-body">
                       <ul class="list-group">
                           <li class="list-group-item">Hdd 200GB</li>
                           <li class="list-group-item">Ram 8GB DDR5</li>
                           <li class="list-group-item">CPU i7</li>
                       </ul>
                   </div>
               </div>
               <div class="panel panel-info">
                   <div class="panel-heading">Images</div>
                   <div class="panel-body">
                       <img src=".." alt="..." class="img-rounded">
                       <img src=".." alt="..." class="img-rounded">
                       <img src=".." alt="..." class="img-rounded">
                       <img src=".." alt="..." class="img-rounded">
                   </div>
               </div>                  
           </div>
       </div>
   </div>
   

1 个解决方案

#1

.mainbox { float: none; }

:)

UPDATE : http://jsfiddle.net/agttL00f/

更新:http://jsfiddle.net/agttL00f/

It hope it helps.

它希望它有所帮助。