0

我在这里开发一个非常简单的单页网站：http: //dispose.co/dormstory/pod.html

如您所见，我已将内容定位绝对，当您单击链接时，以前的内容会淡出，新的内容会淡入。唯一的问题是包含 div 的大小留在页面上，所以当例如，您从Crew过渡到Trailer页面仍然是 1000+px long，因为Crew页面就是那么长......

解决此问题的简单方法是什么？我认为这与将一些高度设置为自动有关，但这根本没有帮助。

也许我需要在fadeIn 和fadeOut 之间重新加载页面？

谢谢你的帮助！

4

2 回答 2

0

作为一种简单的方法，您可以尝试强制单击其中一个链接时的高度。

一种方法是将高度放在数据属性中：

<a href="#" data-main-height="750px">trailer</a>

然后单击，获取该值：

var the_height = $(this).data("main-height");

然后通过 jquery 设置它：

$("#contentarea").css("height", the_height);

如果您的页面使用插件，那么您很可能在转换之前可以使用回调。

我建议也尝试打开后退按钮功能。

-p

于 2013-05-15T21:39:39.160 回答
0

您是否有理由使用table tds 进行布局，而不是浮动divs ？

我相信它的因为table和它的原生风格，所以我建议你尝试将你的布局更改为以下内容：

<div>
    <div id="gutter">
        <!-- Content here -->
    </div>
    <div id="middle">
        <!-- Content here -->
    </div>
    <div id="indiegogo">
        <!-- Content here -->
    </div>
</div>
于 2013-05-15T21:51:44.407 回答