html - 响应式和全高侧边栏

这个主意

就像facebook模态一样，但是这一步必须要有回应。

在此示例中：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中那样移动到底部。

代码

我正在使用这样的引导网格系统：

<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下方。


这真让我抓狂！因此，如果有人知道如何处理这类事情，将不胜感激:)

最佳答案

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

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

关于html - 响应式和全高侧边栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26816834/