我如何实现垂直滑动显示/隐藏DIV与expndable主要DIV

Question

想实现像使用引导下图像的面板：

图01：在全州酒吧。

左侧面板将显示一个显示/隐藏按钮。 隐藏时，它会向上滑动到最小状态（图2）。 主div容器会增加尺寸并填充左侧的空白区域。 所有调整大小都需要使用过渡动画。

图02：侧栏处于最小状态。

任何帮助/提示，​​如何可以实现这一目标？

Answer 1

一种方法是使用float与overflow: hidden：

.parent{ 
 
    overflow: hidden; 
 
    text-align: center; 
 
} 
 
.panel{ 
 
    float: left; 
 
    width: 20%; 
 
    background-color: #EFEF66; 
 
} 
 
.navigation{ 
 
    float: right; 
 
    width: 80%; 
 
    background-color: #EF66EF; 
 
} 
 
.main{ 
 
    overflow: hidden; 
 
    width: auto; 
 
    clear: right; 
 
    background-color: #66EFEF; 
 
}

<div classs="parent"> 
 
    <div class="panel">Side Panel</div> 
 
    <div class="navigation">Navigation</div> 
 
    <div class="main">Main section</div> 
 
</div>

在上面的代码中，你把它作为主状态。现在，如果你想panel伸下来，只是强制height为panel：

.parent{ 
 
    overflow: hidden; 
 
    text-align: center; 
 
} 
 
.panel{ 
 
    float: left; 
 
    width: 20%; 
 
    height: 50px; 
 
    background-color: #EFEF66; 
 
} 
 
.navigation{ 
 
    float: right; 
 
    width: 80%; 
 
    background-color: #EF66EF; 
 
} 
 
.main{ 
 
    overflow: hidden; 
 
    width: auto; 
 
    clear: right; 
 
    background-color: #66EFEF; 
 
}

<div classs="parent"> 
 
    <div class="panel">Side Panel</div> 
 
    <div class="navigation">Navigation</div> 
 
    <div class="main">Main section</div> 
 
</div>

Answer 2

既然你没有显示你得到了什么至今I'ts真的很难帮助你。

Check this codepen for a little help with the HTML structure

HTML

<div class="container-fluid"> 
    <div class="header"> 
    <div class="col-xs-3 header-left"> 
     Hi 
    </div> 
    <div class="col-xs-9"> 
    </div> 
</div> 
<div class="app-body"> 
    <div class="col-xs-12 inner-body"></div> 
</div> 

SCSS

.header{ 
    height: 90px; 
    background-color: blue; 
    position: relative; 
    .header-left{ 
    height: 290px; 
    position: absolute; 
    background-color: red; 
    } 
} 
.app-body{ 
    height: 200px; 
    width: 100%; 
    padding-left: 25%; 
    .inner-body{ 
    height: 100%; 
    background-color: green; 
    } 
} 

你应该能够得到你想要什么starti随着我给你的代码。但请记住，我的代码显示滑下状态。你将不得不添加动画和JS事件来达到你想要的效果。