<div>中的position:absolute; bottom: 0;在IE7中不能按预期工作。

Question

<div>中的position:absolute; bottom: 0;在IE7中不能按预期工作。

14

我的网站是一个为大学提供课程目录工具的站点，有一个中央面板包含动态更新的课程列表。在 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% }但也没有解决问题。

- Scott R

1

我们能看到该网站的链接吗？ - Gordon Gustafson

我不知道，但是http://ryanfait.com/sticky-footer/是否适用？我知道你不需要页脚，但也许其中一些规则可以帮助到你。 - citelao

6个回答

3

在CSS中使用绝对定位时，设置相反的边缘是完全可以接受的，但是Internet Explorer中的限制可能意味着这种方法不起作用。

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

通常使用伪列来实现延伸到元素底部的虚拟列。

- Quentin

虽然不太“好看”且速度较慢，但在IE6中的解决方法是使用备用样式表/样式并设置顶部，高度使用表达式。对于这种情况，如果您使用jQuery，则可以使用top: 0px; height: expression($(window).height())。 - Itison

1

请确保你的文档类型设置为HTML strict，否则IE浏览器会表现奇怪并且在定位和溢出等方面容易混淆。

将以下内容添加到你页面的顶部：

<!DOCTYPE html>

- BalusC

1

position: absolute; bottom: 0px; 将元素设置在底部。但是它必须知道元素的底部在哪里。如果将高度设置为100％或将其放置在另一个bottom: 0px;定位的元素中，则除非其中一个元素位于具有固定大小的元素内（占用整个高度），否则它不知道底部在哪里。您不能将body的高度设置为100％，因为它会无限延伸。尝试指定body或某个包含元素的高度。 :D

- Gordon Gustafson

元素底部的位置将按照正常方式计算。在这种情况下，# middlenav 应跨越窗口的高度（除非有另一个具有 position：not-static 的元素阻挡）。 - Quentin

0

我不太确定我是否完全理解，但我认为您希望在达到一定高度时中心窗格滚动..这是我会做的方式。

#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，一旦超过该高度，滚动条就会出现。min-height在IE7及以下版本中不受支持，因此我使用了IE hack _height 400来充当最小高度。overflow-x:hidden可以隐藏水平滚动条，以防您只想要垂直滚动条。希望这能帮到您。

- briank

-11

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

- Navi

6

不，它们不是。在这里使用的是position:absolute（绝对定位），left设置左边缘相对于左侧的位置，right设置右边缘相对于右侧的位置，以此类推。 - Quentin

1

是的，如果你设置了position:absolute, bottom:0, top:0，bottom属性将被忽略，top属性将具有更高的优先级。 - albanx

1

实际上，您可以设置所有4个位置属性，这样您就可以拥有完整的宽度和高度的漂亮元素 :-) - Andrej Kaurin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- neveraskedforthis · Accepted Answer

“top 属性会覆盖 bottom 属性…” https://developer.mozilla.org/zh-CN/docs/Web/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的高度。高度的默认值是auto，因此不会出现滚动条，因为元素将扩展以适应其内容。

我知道这个问题是3年前提出的，但我发帖是为了其他可能遇到CSS定位问题的人。干杯！