Html <div> 位置：绝对；底部：0；在 IE7 中没有按预期工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1095042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<div> position:absolute; bottom: 0; not working as expected in IE7
提问by
My site, a course catalog tool for universities, has a center pane that contains a dynamically updated list of classes. In Firefox, Opera, and Chrome, the center pane has the intended scrolling behavior: when the class list exceeds the height, the center pane has a scroll bar. IE, however, only shows this bar when the height is explicitly set. Without using JavaScript to reset the center pane height on resize, how can I force Internet Explorer to show the scroll bar?
我的网站是一个大学课程目录工具，有一个中心窗格，其中包含动态更新的课程列表。在 Firefox、Opera 和 Chrome 中，中心窗格具有预期的滚动行为：当类列表超过高度时，中心窗格具有滚动条。但是，IE 仅在明确设置高度时才显示此栏。不使用 JavaScript 在调整大小时重置中心窗格高度，如何强制 Internet Explorer 显示滚动条？
The center pane:
中央窗格：
<div id="middlenav">
<div id="middleheader"></div>
<div id="courselist"></div>
</div>
and its CSS:
及其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%;
}
It looks like the center pane isn't obeying the bottom: 0px;statement, and is expanding to the full height of the contained #courselist. I tried body { height: 100% }but that didn't fix it either.
看起来中心窗格没有遵守该bottom: 0px;声明，并且正在扩展到包含的#courselist. 我试过了，body { height: 100% }但这也没有解决。
回答by namklabs
"The
topproperty overrides thebottomproperty..." https://developer.mozilla.org/en-US/docs/CSS/bottom
“该
top属性覆盖该bottom属性...” https://developer.mozilla.org/en-US/docs/CSS/bottom
Change topto autoinstead of 0px:
更改top到auto的，而不是0px：
div#middlenav
{
position: absolute;
left: 250px;
right: 350px;
top: auto;
bottom: 0px;
}
That should fix the bottom positioning. Remember, if #middlenavis positioned absolutely, it will be relative to whichever parent element has position:absolute;or position:relative;. If #middlenavhas no parent elements that are positioned, it will be relative to <body>.
那应该固定底部定位。请记住，如果#middlenav绝对定位，它将相对于具有position:absolute;或 的任何父元素position:relative;。如果#middlenav没有定位的父元素，它将相对于<body>.
I'm not sure why you have #courselistabsolutely positioned; since it is inside of #middlenavI would think you could leave it static or position it relatively. But regardless of what you do, I think you need a height set on #courselistor #middlenav. The default value of height is auto, so there won't be a scrollbar because the element will expand to fit its content.
我不知道你为什么#courselist绝对定位；因为它在里面，#middlenav我认为你可以让它保持静止或相对定位。但不管你做什么，我认为你需要在#courselist或 上设置一个高度#middlenav。height 的默认值是 auto，所以不会有滚动条，因为元素会扩展以适应其内容。
I know this question was asked 3 years ago, but I'm posting this for other people who may have a problem with CSS positioning. Cheers!
我知道这个问题是 3 年前提出的，但我是为其他可能对 CSS 定位有问题的人发布这个问题的。干杯!
回答by Quentin
While it is perfectly acceptable to set opposite edges when using absolute positioning in CSS, limitations in Internet Explorer mean that the approach may not work there.
虽然在 CSS 中使用绝对定位时设置对边是完全可以接受的，但 Internet Explorer 中的限制意味着该方法可能无法在那里工作。
There is no way to avoid the bug in Internet Explorer 6. In Internet Explorer 7 and newer, triggering Standards Mode will resolve the issue.
无法避免 Internet Explorer 6 中的错误。在 Internet Explorer 7 和更新版本中，触发标准模式将解决该问题。
Faking columns that extend to the bottom of an element is usually achieved using faux columns.
回答by Gordon Gustafson
position: absolute; bottom: 0px; sets the element right on the bottom of the element. But it has to know where the bottom of the element is. If you set the height to 100% or have it in another element positioned bottom: 0px; Then it doesn't know where the bottom is, unless one of those elements is inside (taking up the full height of) and element with a fixed size. You can't give the body a height of 100% because it would just sort of go on forever. Try specifying the height of the body or some containing element. :D
位置：绝对；底部：0px；将元素设置在元素的底部。但它必须知道元素的底部在哪里。如果您将高度设置为 100% 或将其放置在另一个位于底部的元素中：0px; 然后它不知道底部在哪里，除非这些元素之一在内部（占据整个高度）和具有固定大小的元素。你不能给身体 100% 的高度，因为它会永远持续下去。尝试指定主体或某些包含元素的高度。:D
回答by BalusC
Ensure that your doctype is set to HTML strict, otherwise IE will behave quirky and get confused with among others positioning and overflows.
确保您的 doctype 设置为HTML strict，否则 IE 会表现得古怪，并与其他定位和溢出混淆。
Add this to top of your page:
将此添加到页面顶部：
<!DOCTYPE html>
回答by briank
I am not quite sure if i fully understand but I think you want the center pane to scroll when it reaches past a certain height..this is how I would do it.
我不太确定我是否完全理解，但我认为您希望中央窗格在超过某个高度时滚动..这就是我要做的。
#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; }
This sets your course list in all browsers to a minimum height of 400, once that is passed a scrollbar appears. min-height is not supported in IE7 and lower so i used the IE hack _height 400 so it acts as a min height. overflow-x:hidden is hiding the horizontal scroll just in case you only want vertical. I hope this helps you.
这会将您在所有浏览器中的课程列表设置为最小高度 400，一旦通过，就会出现滚动条。IE7 及更低版本不支持最小高度，因此我使用了 IE hack _height 400，因此它充当最小高度。overflow-x:hidden 隐藏水平滚动，以防您只想要垂直滚动。我希望这可以帮助你。
回答by Navi
Don't use top and bottom positioning in the same class and don't use right and left positioning in the same class, as they are contradictory values to each other.
不要在同一个类中使用顶部和底部定位，也不要在同一个类中使用左右定位，因为它们是相互矛盾的值。
