Question

我有以下简单的脚本，但它在IE7中不起作用

<div id="content">
    <div id="left"></div>
    <div id="right"></div>
    <div id="bottom_menus">any text here...</div>
</div>

和CSS

#content
{
    margin: 0 auto;
    padding: 0;
    width: 980px;
    background-color: lime;
    height: 800px;
    overflow: hidden;
    position: relative;
}
#left
{
    width: 275px;
    float: left;
    background-color: olive;
    margin: 0px 0px -5000px 0;
    padding: 0 0 5000px 0;
    min-height: 400px;
}
#right
{
    width: 704px;
    float: left;
    background-color: red;
    margin: 0px 0px -5000px 0;
    padding: 0 0 5000px 0;
    min-height: 400px;
}
#bottom_menus
{
    background-color: orange;
    height: 15px;
    position: absolute;
    bottom: 0px;
    width: 100%;
}

为什么绝对位置不起作用？提前谢谢

Answer 1

要使绝对位置起作用，必须指定两个方向：例如。 top＆amp; left或bottom＆amp; right等...

为你的页脚（bottom_menus）占用你需要设置的所有空间：

#bottom_menus {
    background-color: orange;
    height: 15px;
    position: absolute;
    left: 0;
    right: 0; //assuming you need the footer to take the whole width
    bottom: 0;
    width: 100%;
}

ps：小注释，当值为0时你不需要设置px单位。

Answer 2

你没有指定左边，所以默认为0px;由于盒子上有-5000px的边距，我猜它正在工作，而bottom_menus div在屏幕左边。绝对定位会忽略其父容器的填充。尝试设置左：5000px，假设您需要负边距和正填充。你想用它做什么？

CSS位置绝对在IE7中不起作用

2 个答案: