1

现在几个小时后，我仍然被困在这个问题上；我试图使这个框相对定位，以便结果不会与我的页脚重叠。我试图通过 javascript 实现这一点，但没有奏效，现在我不知道如何使它相对一致。

这是jsfiddle：http: //jsfiddle.net/Lp2kV/1/

如果我将内容从绝对更改为相对，我相信问题可以解决，但之后我无法像现在一样对齐它。

这是我认为我需要编辑定位的部分。

.content  {
   position: absolute;
    top: 28px;
    left: 0;
    background: #eee;
    right: 81px;
    min-height: 200px;
    padding: 20px;
    border: 1px solid #ccc;
    height:auto;
}
4

1 回答 1

0

如果您只希望结果内容包含在 DIV 区域内并在右侧有一个滚动条，您可以在 .content 选择器中添加以下属性。这是如果您希望高度保持不变。

overflow: auto;

但是如果您希望高度灵活，那么您应该实施这种方法..

首先，删除 height 属性。

<div id="results_1">
    <div style="clear: left; height: 0; margin: 0; padding: 0;">

会变成

<div id="results_1">
    <div style="clear: left; margin: 0; padding: 0;">

在结束标记之前<div class="content">，您应该添加<div style="clear: both;"></div>. 这将根据内容自动扩展灰色容器的高度。

也许你接下来要做的是有一个javascript代码来计算内容框的高度，然后通过javascript调整页脚的上边距，这样它们就不会重叠。

我强烈建议只使用 jquery 插件来创建一个选项卡式框并忽略我的解决方案。这将解决您的定位问题。您能够重叠 .content 框的唯一方法是因为它们是绝对定位的......并且绝对定位的元素加起来不等于其父元素的大小。因此，当您将绝对更改为相对时，选项卡将分散，因为每个选项卡都会扩展到其子元素的大小。overflow: auto;除非您使用 javascript 或在 .content 选择器上应用，否则您无法实现选项卡式框并且不会与当前方法重叠页脚。

希望这可以帮助。

于 2013-06-21T09:51:14.583 回答