Question

使用bootstrap，我想要的是让左列与左列的高度相同。我不能设置固定，因为左边的内容是动态的。您认为最佳解决方案是什么？

demo http://daysof.me/interview/

Answer 1

这可以不使用脚本

以下是一个工作示例：Chatfield Drilling

在sideBar中，点击其中一个标题，看看为什么溢出：auto;帮助

<强> BUT

它有它的限制。这是我创建并使用了很多的一点设置。

N

左列必须是相对的，静态的，或者您的浮动已清除
溢出：自动;强烈推荐
使用绝对定位元素
维护起来很棘手

右边的边将遵循它的兄弟mainBody的高度，这就是为什么我将overflow: auto;添加到等式中。当那边的内容较长时，你可以直接滚动div。

父级的高度基于左侧，这是您放置大部分信息的位置。

只需查看此JSFIDDLE，并在添加更多文字时观看sideBar与其父级一起增长。

HTML：

<div class="wrapper">
    <div class="mainBody">
        <p>Lorem ipsum dolor sit amet, ad similique scripserit vix, dictas graecis qui cu, an vis ubique aperiri. Duo in impetus maiorum, pro dolorem alienum liberavisse an. Vim veri inani conclusionemque eu. Omnesque consequat vix id, ut sit ferri illud. Cu cum elitr eirmod, vim dolorum sadipscing ne.</p>
    </div>
    <div class="sideBar"></div>
</div>

CSS：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    width: 80%;
    margin: 0 auto;
    position: relative;
}

.mainBody {
    width: 60%;
    background: brown;
}

.sideBar {
    width: 35%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: tan;
    overflow: hidden;
}

侧面按尺寸div具有相同的高度和响应

1 个答案: