0

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

<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 中的哪一个),而不必求助于使用 JSoffsetHeight等属性?

我在想使用绝对定位是做我想做的事情的唯一方法,但是一旦使用绝对定位,页脚就会一直移动到页眉正下方,因为内容容器 div 被解释为具有高度0。

4

2 回答 2

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-height0您可以使用height,但我使用了max-height其他 CSS 过渡不会为高度设置动画)。列的宽度为 100%,因此它们将占据容器的宽度。然后将它们水平设置,display: inline-block并将容器white-space设置为nowrap. 容器也有overflow: hidden这样我们就不会得到水平滚动条。因此,只有活动列会有高度,其他列会被折叠。

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

我觉得我在这里闲逛了,我希望你已经理解了要点。

于 2013-10-28T20:02:41.923 回答
1

如果您的“content_container” div 在您的页面上适当水平放置,那么您可以在 content_container 上添加一个浮动并清除页脚上的浮动以始终使其位于您的 content_container 下方。

.content_container {
  float: left;
}

.footer {
  clear: both;
}

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

于 2013-10-28T04:17:53.547 回答