bootstrap equal height divs（响应式设计）

Question

我有一个会有广告的边栏div。它应该具有大约333px的固定宽度，并且需要它在其高度上具有响应性。

它有一个背景但是当内容加载在主div中时，side-bar div不会延长主要内容的长度。我尝试了一些东西，但在不同的浏览器中获得了不同的结果。

当在移动视图中或在小视图中时，侧栏应该适合窗口宽度的大小，并且只有侧边栏中的内容高。

我已经加载了一些图片来举例说明我需要什么。

以下是我拥有的ccs

.main
{
  padding: 20px;
}
.side-bar
{
    background-image: url('../images/BlueBG.jpg');
    width: 333px;
    display: block;
    height: 100%;
}

Answer 1

在SO上已经问了几次，但你可以使用flexbox。如果您使用的是bootstrap，那么您很可能会有一个container-fluid类。只需将显示设置为flex，其中的所有项目都将成为灵活项目。这将允许你伸展他们。在您的情况下，您必须将container-fluid设置回block，或者在您的移动设备的媒体查询中将main和side-bar设置为flex-basis:100%。< / p>

这是小提琴：http://jsfiddle.net/56we9rmj/2/

<强> HTML

<div class="container-fluid">
<div class="main"><p>Arcu dictumst nec ultricies aptent rhoncus. Sed fermentum ligula. Donec vitae felis. Lectus nec ad. Tempus et quam. Nec dolor eu. Lacus at in eu dolor penatibus. Quis vivamus vehicula. Mauris dui ullamcorper diam eget pretium lectus consectetuer ultrices tincidunt sit nulla. Lobortis lacus et. Dolor ea placerat etiam diam aenean integer nec erat. Suscipit ut elementum. Consectetuer dui id vestibulum cras egestas. Quis nulla nulla. Pariatur pellentesque amet taciti neque lorem fermentum vehicula amet elit blandit pellentesque. Cras sit gravida. Cras vulputate curabitur mauris purus semper mauris lacus et et pulvinar in justo nullam qui sed quam massa. Integer amet ullamcorper. Feugiat quis sed quam fusce non feugiat amet vitae. Arcu elementum eget justo ac sed quis id tellus.</p>

    <p>Vivamus non cras. Turpis in eleifend mattis nam arcu aliquam vulputate felis. Dignissim ligula dignissim habitant nonummy proin. Mauris varius varius. Purus lorem ullamcorper dictum cras in felis ullamcorper vitae. Nunc amet interdum nec adipiscing tempus ac vestibulum primis. Nisl purus orci sed sunt mauris. Odio donec nulla. Pellentesque arcu felis. Et varius ornare eros id quisque. Vel dui velit arcu eget in dignissim nunc nec habitasse habitasse elit quis ac aptent duis volutpat facilisis varius ut sem consectetuer erat arcu. Mauris condimentum sodales luctus a ullamcorper amet a pellentesque tellus ac sit. Nam mauris nulla neque aenean tempus. Mi dui ipsum. Laoreet vitae mauris. Arcu at tristique. Quia mi praesent nibh eu est. Dui libero condimentum elementum risus risus. Ut feugiat diam. Quam semper erat felis ultricies vel. Sed proin sollicitudin. Etiam eleifend morbi imperdiet purus pharetra. Vel diam feugiat. Vel volutpat vulputate. Enim ligula fringilla at nunc risus.</p>
</div>
<div class="side-bar">
    <img src="http://placehold.it/300x100" />
    <img src="http://placehold.it/300x100" />
</div>
</div>

<强> CSS

.container-fluid {
    display:flex;
    align-items:stretch;
    align-content:stretch;
}

.main {
    flex-basis:66.66666667%;
    padding:20px;
}

.side-bar {
    background:red;
    flex-basis:33.3333333%;
}

.side-bar img {
    width:100%;
}
@media screen and (max-width:Mobile-PX-HERE) {
.container-fluid {
    flex-wrap:wrap;
 }
    .main, .side-bar {
        flex-basis:100%;
     }
}

希望有所帮助！

Answer 2

将position:absolute;和100%高度赋予侧边栏即可。 http://jsfiddle.net/fdf01y4b/
调整窗口大小或添加更多文本以查看其实际操作

.side-bar {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

如果您的侧边栏出现父div的问题，只需将position:relative;提供给父包装，就像我在Jsfiddle示例中所做的那样

<div class="wrapper">
    <div class="main">Content</div>
    <div class="side-bar">Sidebar</div>
</div>

.wrapper{
    position:relative;
}

对于较小的屏幕，您只需使用媒体查询即可将标题position:absolute;移至position:initial;：

@media (max-width: 600px){
    .side-bar{
        position: initial;
    }
}