javascript - 父容器不尊重子容器的高度

Question

非常常见的问题，通常围绕当前情况展开，因此在阅读了一堆不同的解决方案并尝试将它们滑入之后，我想我应该根据自己的情况自己问这个古老的问题。

情况

我使用 jQuery 构建了一个小页面 slider ，它似乎按预期工作，然后我注意到 CSS 高度仍设置为我用于测试的默认值。删除它后，我似乎无法让 parent 的高度适应不同 child 的高度。我知道将不同 div 的位置设置为相对而不是绝对会显示它们，但是 div 不再正确定位(位于彼此下方)。我发现的其他解决方案围绕着不使用对我自己来说甚至很常见的标记。

问题

是否有针对此问题的 CSS 修复程序允许我按照我设置的方式利用 Bootstrap 以及我已经编写的 jQuery 动画？或者他们是否有任何建议可以在不对标记进行太多更改的情况下使这项工作正常进行？我尝试了几种不同的变体，这似乎是最稳定的。

代码

我已将其添加到 jsFiddle .由于某种原因，我无法让动画在 fiddle 中工作(在所有浏览器中都可以在我的笔记本电脑上工作)，但默认布局应该足以看出父元素如何不尊重子元素。

<style>
.container {
    margin-top: 50px;
}
.row {
    margin-bottom: 20px;
}
.windowBox {
    overflow: hidden;
}
.box {
    background-color: #FFF;
    position: absolute;
    width: 100%;
}
.page1 {
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 999; /* set to be over page2 onload */
}
.page2 {
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 99; /* set to be under page1 onload */
}
</style>

<div class="container">

    <div class="row">
        <div class="col-sm-12">Header text should be above either page.</div>
    </div>

    <div class="row">
        <div class="text-center">
            <button type="button" id="showPage1" class="btn btn-danger" disabled>Page 1</button>
            <button type="button" id="showPage2" class="btn btn-primary">Page 2</button>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12 windowBox">
            <div class="row">
                <div class="box page1">
                    <div class="hidden-xs col-sm-6">...</div>
                    <div class="col-sm-6">...</div>
                </div>
                <div class="box page2">
                    <div class="col-sm-12">...</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">Footer text should be under either page.</div>
    </div>
</div>

Answer 1

DEMO

在您的标记中添加了一个 .over 类。那是那里唯一的改变。

CSSover class是windowBox的容器。
我们希望它有一个隐藏的溢出，因为它将并排包含我们所有的页面。

.over {
    overflow: hidden;
}

不幸的是，这是一个固定值。基本上它是你的窗口 X 页面的宽度。如果您要添加的不仅仅是一页，您可以在 JavaScript 中设置该值。

.windowBox {
    width: 220vw;
}

然后我们简单地将容器设置为“某种”固定宽度。
响应宽度..所以 95 的视口(viewport)宽度是合理的。

.box {
    background-color: #FFF;
    width: 95vw;
    display: inline-block;
    float: left;
}

在 JavaScript 中，您设置的不是 left 属性，而是 margin-left。
您只需要为第一个元素执行此操作。如果你想滚动到第 4 页，你可以将第一页边距设置为 -4 * 95vw