css - bootstrap 等高 div(响应式设计)

Question

我有一个包含广告的侧边栏 div。它应该有一个大约 333px 的固定宽度，并且需要它的高度是可能的。

它有一个背景，但是当内容加载到主 div 中时，侧边栏 div 不会扩展主要内容的长度。我尝试了一些东西，但在不同的浏览器中得到了不同的结果。

当在移动 View 或小 View 中时，侧边栏应该适合窗口的宽度大小，并且高度只能与侧边栏中的内容相同。

我加载了一些图片作为例子来展示我的需要。

下面是我的抄送

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

Answer 1

这已经被问过几次了，但是你可以为此使用 flexbox。如果您使用 Bootstrap ，您很可能会有一个 container-fluid 类。只需将显示设置为 flex，里面的所有元素都会变成 flex 元素。这将使您可以拉伸(stretch)它们。在您的情况下，您必须将 container-fluid 设置回 block 或设置您的 main 和 side-bar 在您手机的媒体查询中设置为 flex-basis:100%。

这是 fiddle :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%;
     }
}

希望对您有所帮助!