css - 是否可以在不设置高度的情况下绝对定位内容？

Question

我有一个站点的以下基本标记:

<div class="header"></div>
<div class="content_container">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>
<div class="footer"></div>

我希望能够定位三个内容 div，使它们水平对齐一次只有一个可见，这样我就可以在它们之间左右滑动/强>.

要注意的是，三个 div 中的每一个都包含不同数量的内容，因此默认情况下具有不同的高度。

是否可以允许 div 保留其默认高度并仍然强制页脚显示在内容正下方(无论当前显示三个内容 div 中的哪一个)而不必求助于使用 offsetHeight 等 JS 属性，等等？

我认为使用绝对定位是做我想做的唯一方法，但是一旦使用绝对定位，页脚就会一直向上移动到标题下方，因为内容容器 div 被解释为高度为 0。

Answer 1

演示 http://jsfiddle.net/ZRE3s/

jquery 片段只是为了演示，我对 javascript 一点也不精通。但该代码片段基本上是在单击列时向容器添加一个类。

除了我使用自己的类名外，该标记与您的类似，但它足够直观。

<div class='container'>
    <div class='col-1'></div>
    <div class='col-2'></div>
    <div class='col-3'></div>
</div>    
<div class='footer'>Footer</div>

列的初始 max-height 为 0(您可以使用 height，但我使用的是 max-height 否则 CSS 过渡不会动画高度)。列的宽度为 100%，因此它们将占据容器的宽度。然后将它们水平设置为 display: inline-block 并将容器的 white-space 设置为 nowrap。容器还有 overflow: hidden 这样我们就不会得到水平滚动条。因此，只有事件列会有高度，其他列会被折叠。

基本上，除事件列之外的每一列的高度均为零，并且由于容器具有 height: auto;，它将采用事件列的高度。

我觉得我在这里漫无目的，我希望你已经理解了要点。