html - css tabs - 从绝对定位到相对定位

Question

几个小时后，我仍然卡在这个问题上；我试图让这个框相对定位，这样结果就不会与我的页脚重叠。我试图通过 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;
}

Answer 1

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

overflow: auto;

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

首先，删除高度属性。

<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 框的唯一方法是因为它们是绝对定位的……并且绝对定位的元素不会加起来等于其父元素的大小。因此，当您将 absolute 更改为 relative 时，选项卡将会分散，因为每个选项卡都会扩展到其子元素的大小。除非您使用 javascript 或应用 overflow: auto;，否则您无法实现选项卡式框并且不会与当前方法重叠页脚。在 .content 选择器上。

希望这对您有所帮助。