Question

我正在使用我正在处理的项目遇到一些奇怪的行为：

http://daft.net76.net/yah/

单击规则链接时，整个布局向左移动一个或三个像素。我将此归因于该div中的内容量，因为当您点击内容高度较小的“分数”链接时。

下部div结构如下所示：

<div id="lowercontent">
    <div id="rulesDiv" >
        <h1>Rules</h1>
        <p>Clicking the roll button rolls the dice. You have 3 rolls per turn.
        After rolling you can choose to keep dice through rolls. Click a die to keep it through a turn.
        Submit a combination of dice by clicking an option and clicking Score Roll.
        To claim yahtzee either click the zee button, or score roll without anything selected.
        To claim yahtzee either click the zee button, or score roll without anything selected.
        To claim yahtzee either click the zee button, or score roll without anything selected.
        To claim yahtzee either click the zee button, or score roll without anything selected.</p>
    </div>
    <div id="scoresDiv">
        <h1>Scores</h1>
        <p>1</p>
    </div>
    <p id="closeTest"><span id="close">close</span></p>
</div>

我正在使用jquery函数在分数和规则之间进行交换。 lowercontent是固定宽度的div。内部规则和分数div没有宽度。

有什么想法吗？如果需要更详细的关于div的css，请告诉我。

Answer 1

显示Rules div时，会导致滚动条出现。首先，这真的不是什么大不了的事情......我只想不管它。

如果真的困扰您，请将其添加到您的CSS：

html { height: 100% }
body { height: 101% }

这将强制滚动条始终存在，因此布局不会移动。

Answer 2

我的原始答案如下，但事实是，如果您觉得需要做任何事情，那么只有一个很好的答案：模态窗口。

模态窗口是弹出到前台的窗口，需要先执行操作才能继续执行您正在执行的操作。即使你不知道名字，你也曾经使用过一个。一个例子是应用程序中的打开文件对话。你必须选择一个文件或取消继续。

在网络上，您可以非常轻松地复制此功能。它涉及对内容进行“叠加”以阻止用户触摸它以及叠加层顶部的模态框。大多数网络示例都会遮盖叠加层，让用户知道什么是焦点。

这解决了您的问题，因为它通过将新内容放在旧内容上来阻止内容变得更长，因此滚动条不需要显示。

幸运的是，有预制解决方案（见最后一行），但我认为最适合你的是Facebox。它轻盈而性感，只需显示一些信息。看起来你不需要在其他行动中陷入困境。

至少，这是因为窗口上的滚动条会弹出。

有几种方法可以解决这个问题，但所有方法都很糟糕或不完美：

使用左对齐设计。
在加载时，如果高度大于内容的计算高度（无滚动条），则强制内容创建滚动条。比较宽度。从您的内容的左边距中扣除一半。呸！
使用onload和onresize挂钩手动设置内容中心，以更改内容的边距。可能是最干净的，你可以留在margin:auto以防万一。这不适用于IE6，但我想这是预期的。
您可以将内容放入用户必须切换的标签中。
使用弹出式模态图层而不是将内容附加到页面底部。我在考虑像LightBox这样的东西，但内容而不是图像。我认为可能有一个脚本已经用内容完成了这个。

修改：See this了解有关模态窗口的更多提示。

内容变得太大时划分移位

2 个答案: