html - 响应式和全高侧边栏

Question

想法

就像 facebook modals 一样，但是这个必须是响应式的。

在这个例子中:http://jsfiddle.net/Frondor/ufby12n7/5/embedded/result/ (调整结果窗口的大小/调整以查看责任)。

我在视频旁边放置了描述，desc。位于侧边栏内，但它太短了，而且当窗口足够宽时，侧边栏 (.sideview) 无论如何都必须到达整个模态框的底部。

所以我对它进行了绝对定位并使用了“top:0; right:0; bottom:0;”技巧: http://jsfiddle.net/Frondor/ufby12n7/8/

它的效果很好，但是当窗口的尺寸变小时，.sideview 会与视频重叠，而不是像 previous version 中那样移动到底部。 .

代码

我正在使用这样的 Bootstrap 网格系统:

<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应该放在就在 .viewer 的下方。

这让我发疯!所以，如果有人知道如何处理这类事情，将不胜感激:)

Answer 1

也许是这样的http://jsfiddle.net/ufby12n7/9/

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