CSS右欄菜單和內容下移

Question

我用css和hml創建了一個右菜單欄。 它看起來像這樣：

當小屏幕是這樣的：

1. 我不要這個 我的工作代碼在這里 。

2. 我想要一個滾動條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> 

Answer 1

.mainbox { float: none; }

:)

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

希望對您有所幫助。