響應式和全高側邊欄

Question

這個主意

就像facebook模態一樣，但是這一步必須要有回應。

在此示例中： http : //jsfiddle.net/Frondor/ufby12n7/5/embedded/result/ （調整大小/調整結果的窗口以查看職責 ）。

我正在視頻旁邊（desc）放置說明。 是在側邊.sideview ，但是它太短了，並且當窗口足夠寬時 ，側邊欄（ .sideview ）無論如何都必須達到整個模式的底部。

因此，我已將其絕對定位，並使用了“ top:0; right:0; bottom:0; ”技巧： http : //jsfiddle.net/Frondor/ufby12n7/8/

它的工作.sideview很.sideview ，但是當窗口的尺寸變.sideview ， .sideview與視頻重疊，而不是像上一版本那樣移至其底部。

編碼

我正在使用這樣的引導網格系統：

<div class="mmcontainer row">

        <div class="viewer col-sm-8">
              <!-- here goes video -->
        </div>

        <div class="sideview col-sm-4">
              <!-- here goes the video desc.-->
        </div>

</div>

的CSS

.mmcontainer {
    background: #333;
    position: relative;
    width: auto;
    margin: 30px;
}
.viewer {
    color: #666;
    text-shadow: 1px 1px #000;
    padding:10px;
}
.sideview {
    background: #ccc;
    text-shadow: 1px 1px #EEE;
    padding: 10px;
    height: 100%;
    min-height: 250px; 
    max-height: 400px;
    position: absolute; /* here's the trick */
    top: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto; /* because scrollbars are awesome */
}

我要實現的“行為”：

• 當描述太短且窗口足夠寬時：只需繼續.sideview背景，直到模態底部。

• 當描述太長並且窗口足夠寬時： .sideview應該有一個垂直滾動條。

• 當窗口足夠.sideview應將.sideview放在.viewer正下方。

這真讓我抓狂！ 所以，如果有人知道如何處理這種事情，將不勝感激:)

Answer 1

也許像這樣http://jsfiddle.net/ufby12n7/9/

@media only screen and (max-width : 768px) {
    .sideview {
        position: relative;
    }
}