Question

想法

就像facebook模式一样，但这个必须要有回应。

在此示例中：http://jsfiddle.net/Frondor/ufby12n7/5/embedded/result/（调整结果＆调整结果的窗口以查看责任）。

我在视频旁边放置了一个描述，即desc。在侧边栏内部，但它太短而当窗口足够宽时，侧边栏（.sideview）无论如何都必须击中整个模态的底部。

所以我绝对定位并使用＆＃34; top:0; right:0; bottom:0;＆＃34;技巧： 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 */
}

＆＃34;行为＆＃34;我想实现：

当描述太短，窗口足够宽时：只是继续.sideview背景，直到模态的底部。
当描述太长时，窗口足够宽：那里应该是.sideview。
当窗口足够小时，应放置.sideview 在.viewer。

这让我抓狂！所以，如果有人知道如何处理这类事情，我们将非常感激：）

Answer 1

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

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

响应式和全高侧边栏

想法

代码

＆＃34;行为＆＃34;我想实现：

1 个答案: