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

我有以下网站的基本标记：

<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中的哪一个），而不必使用JS属性，如

offsetHeight

，等等

我认为使用绝对定位是做我想要做的事情的唯一方法，但是一旦使用绝对定位，页脚就会一直向上移动到页眉的右下方，因为content container div的高度被解释为0。

如果您的“content\u container”div在页面上水平放置，然后您可以在内容容器上添加一个浮点数，并清除页脚上的浮点数，使其始终位于内容容器下方

.content_container {
  float: left;
}

.footer {
  clear: both;
}

更新：这里有完整的标记和CSS:。 我使用了颜色来显示不同div的位置。

演示

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

和容器的

空白设置为
nowrap
水平设置它们。容器还有
溢出：隐藏
，这样我们就不会得到水平滚动条。因此，只有活动柱具有高度，其他柱将被折叠

基本上，除了活动列之外，每个列的高度都为零，并且由于容器具有
height:auto它将采用活动列的高度

我觉得我已经在这里漫谈了，我希望你已经理解了要点。
取决于CSS类的
显示值。Shivan，你能在评论中更具体一点吗？谢谢。请尝试使用jsFiddle中的
display:table
和
display:inline
。它们会根据内容自动调整大小。如果float:left将您的内容容器移动到您不希望它位于的最左侧位置，那么还有其他方法来定位它。让我知道上面的方法是否有效，然后我们可以根据您的喜好对其进行调整。这似乎没有什么区别，因为所有三个内容分区都是绝对定位的，这使容器的默认高度为0。理想情况下，我希望容器div延伸到显示内容div的高度，并使页脚位于内容下方。我想知道纯CSS是否可以实现这一点，但如果不行，我将在JS中使用类似于
offsetHeight
的东西手动设置内容分区的高度。谢谢。不要让内容分区绝对定位。而是将overflow:auto添加到.content\u容器中。这将使content_容器自动扩展，以包含content div的高度，并强制页脚向下移动。让我知道它是否对你有效。amitsaurav，谢谢你的帮助。然而，我仍然不明白你的提琴对我有什么帮助，因为我想要的是一次只显示一个带有页眉和页脚的contentdiv。我看不出使用浮动是怎么可能的。如果我遗漏了什么，请告诉我。谢谢。这是一个很好的解决方案。很有创意。谢谢。