Question

我的网站是大学的课程目录工具，它有一个中心窗格，其中包含动态更新的课程列表。在Firefox，Opera和Chrome中，中心窗格具有预期的滚动行为：当类列表超出高度时，中心窗格具有滚动条。但是，只有在明确设置高度时，IE才显示此栏。在调整大小时不使用JavaScript重置中心窗格高度，如何强制Internet Explorer显示滚动条？

中心窗格：

<div id="middlenav">
    <div id="middleheader"></div>
    <div id="courselist"></div>
</div>

及其CSS：

div#middlenav {
    position: absolute;
    left: 250px;
    right: 350px;
    top: 0px;
    bottom: 0px;
}

div#courselist {
    overflow: auto;
    position: absolute;
    top: 55px;
    bottom: 0px;
    width: 100%;
}

看起来中心窗格不符合bottom: 0px;语句，并且正在扩展到包含的#courselist的完整高度。我试过了body { height: 100% }，但也没有解决它。

Answer 1

“top属性会覆盖bottom属性...” https://developer.mozilla.org/en-US/docs/CSS/bottom

将top更改为auto而不是0px：

div#middlenav
{
    position: absolute;
    left: 250px;
    right: 350px;
    top: auto;
    bottom: 0px;
}

这应该可以解决底部定位问题。请记住，如果绝对定位#middlenav，则它将相对于具有position:absolute;或position:relative;的父元素。如果#middlenav没有定位的父元素，则它将相对于<body>。

我不确定你为什么#courselist绝对定位;因为它在#middlenav内部，我认为你可以将它保持静止或相对定位。但无论你做什么，我认为你需要在#courselist或#middlenav设置一个高度。 height的默认值为auto，因此不会有滚动条，因为该元素将展开以适合其内容。

我知道这个问题是在3年前被问到的，但是我发布这个问题给其他可能有CSS定位问题的人。干杯！

Answer 2

虽然在CSS中使用绝对定位时设置相对边是完全可以接受的，但Internet Explorer中的限制意味着该方法可能无法在那里工作。

无法避免Internet Explorer 6中的错误。在Internet Explorer 7及更高版本中，触发标准模式将解决此问题。

通常使用faux columns来实现伪造延伸到元素底部的列。

Answer 3

位置：绝对;底部：0px;将元素设置在元素的底部。但它必须知道元素的底部在哪里。如果您将高度设置为100％或将其放在另一个位于底部的元素中：0px;然后它不知道底部在哪里，除非其中一个元素在内部（占据整个高度）和具有固定大小的元素。你不能给身体100％的高度，因为它会永远继续下去。尝试指定正文的高度或某些包含元素。：d

Answer 4

确保您的doctype设置为HTML strict，否则IE会表现得古怪并且与其他定位和溢出混淆。

将其添加到您的页面顶部：

<!DOCTYPE html>

Answer 5

我不太确定我是否完全理解，但我认为您希望中心窗格在达到某个高度时滚动。这就是我要做的。

#middlenav { position:absolute; left:250px; top:0 }
#courselist { position: absolute;top: 55px; left:0; min-height:400px; _height:400px;
              overflow:scroll; overflow-x:hidden; width:500px; }

这会将所有浏览器中的课程列表设置为最小高度400，一旦通过，就会出现滚动条。 IE7中不支持min-height，因此我使用了IE hack _height 400，因此它可以作为最小高度。 overflow-x：hidden正在隐藏水平滚动，以防您只想垂直。我希望这可以帮助你。

Answer 6

不要在同一个班级中使用顶部和底部定位，也不要在同一个班级中使用左右定位，因为它们是相互矛盾的值。

<div>位置：绝对;底部：0;在IE7中没有按预期工作</div>

6 个答案: