Question

几个小时后，我仍然坚持这个问题;我试图让这个盒子相对定位，以便结果不会与我的页脚重叠。我试图通过javascript实现这一点，但这不起作用，现在我不知道如何使这相对一致。

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

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

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

Answer 1

如果您只希望结果内容包含在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框的唯一方法是因为它们绝对定位..并且绝对定位的元素不能达到父元素的大小。因此，当您将绝对值更改为相对值时，选项卡将分散，因为每个选项卡将扩展为其子元素的大小。除非使用javascript或在.content选择器上应用overflow: auto;，否则无法实现选项卡框并且不会将页脚与当前方法重叠。

希望这有帮助。

css标签 - 从绝对定位变为相对定位

1 个答案: