位置：绝对在Firefox中

问题描述：

我正在尝试放置一个简单的2列页面，左边是文本，右边是各种徽标和东西。在右栏的最底部，我需要放置一些文字。一个简单的position: absolute; width: 250px; bottom: 0;似乎是我所需要的。这是我想出了代码，还举办here：这非常适用的解决方案除了火狐所有的浏览器位置：绝对在Firefox中

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
body{ 
    margin: 0px; 
    background-color: #eee; 
}#content{ 
    background: white; 
    width: 900px; 
    text-align: left; 
    font-family: Arial, Helvetica, sans-serif; 
}#text{ 
    padding-left: 8px; 
    padding-right: 8px; 
}.left{ 
    width: 634px; 
    border-right: 2px solid black; 
}.right{ 
    width: 250px; 
    text-align: center; 
    position: relative; 
}.bottom{ 
    position: absolute; 
    width: 250px; 
    bottom: 0; 
} 
</style> 
</head> 
<body> 
    <center> 
     <div id="content"> 
      <div id="body"> 
       <table border=0> 
        <tr valign="top"> 
         <td id="text" class="left"> 
          Some text 
         </td><td class="right"> 
          <center class="bottom"> 
           Bottom 
          </center> 
         </td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </center> 
</body> 
</html>

。 Firefox将元素设置为position:fixed，将它锁定在屏幕底部，而不是元素底部（通常位于屏幕底部）。我似乎无法找到其他人有这个问题，这意味着我做错了什么。我已经搞砸了好几个小时，但结果一直不变。任何帮助将非常感激。

答

使用两个div进行定位。像这样

live demo

代码为

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
body{ 
    margin: 0px; 
    background-color: #eee; 
}#content{ 
    background: white; 
    width: 900px; 
    text-align: left; 
    font-family: Arial, Helvetica, sans-serif; 
}#text{ 
    padding-left: 8px; 
    padding-right: 8px; 
}.left{ 
    width: 634px; 
    border-right: 2px solid black; 
}.right{ 
    width: 250px; 
    text-align: center; 
    height:150px; 
    background:red; 
    position: relative; 
}.bottom{ 
    position: absolute; 
    width: 250px; 
    bottom: 0; 
    background:green; 
} 
</style> 
</head> 
<body> 
    <center> 
     <div id="content"> 
      <div id="body"> 
       <table border=0> 
        <tr valign="top"> 
         <td id="text" class="left"> 
          Some text 
         </td><td> 
<div class="right"> 
         <center class="bottom"> 
           Bottom 
          </center> 
         </div> 
         </td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </center> 
</body> 
</html>

你所做的只是赋予'＃右侧'和'。底部'固定的高度。''right'需要与'.left'相同的高度，这会更高。 – 2012-08-13 08:57:14

答

比它需要的是你使这种更加困难。这个答案是基于你的描述，但我相信它应该适合你。此外，我将基于内部消耗的百分比来做这件事，因为我不相信使用像素（与移动设备打交道已经让我远离了这一点）。这里有云：

body { 
margin: 0 auto; 
background-color: #eee; 
} 
#content { 
background: white; 
width: 900px; 
text-align: left; 
font-family: Arial, Helvetica, sans-serif; 
} 
#left{ 
width: 72%; 
border-right: 2px solid black; 
overflow: hidden; 
} 
#right{ 
width: 25%; 
text-align: center; 
float: right; 
overflow: hidden; 
} 
#bottom{ 
float: right; 
width: 25%; 
}

你应该把上述代码放到一个样式表文件，并调用它，而不是仅仅把代码到网页，但这只是语义。这里是这个样式表的HTML代码：

<html> 
    <head> 
    ... (do whatever you need to here, including the stylesheet call) 
    </head> 
    <body> 
     <div id="content"> 
      <div id="left"> 
      ...(place your stuff that goes on the left here) 
      </div> 
      <div id="right"> 
      ...(place your stuff that goes on the right here) 
      </div> 
      <div id="bottom"> 
      ...(place your stuff that goes on the bottom right here) 
      </div> 
     </div> 
    </body> 
</html>

这应该给你基本的布局。现在，请记住，如果左侧div与右侧div不同，那么您在两个部分之间创建的垂直线将不会完全一致。让我知道这是如何工作的，我会看到我能做些什么来帮助你进一步。

**仅供将来参考，我倾向于远离使用表格进行造型。一旦你的网页变得相当复杂，它们往往难以处理。 Div和其他元素往往效果更好。

我在实际站点中使用外部样式表，我只是将它合并到一个文件中显示。另外，相信我，我完全了解桌子的恐怖。我用表格做了这个页面，因为我无法正确使用旧版本的IE来显示浮动元素。我会尝试你的代码，但没有桌子，也许我会很幸运。我很想做这个没有桌子的页面。 – 2012-08-13 08:24:56

使用你的代码，任何'float：right'的顶边都在'＃left'的底部。如果我在'＃left'之前移动'＃right'的HTML，那部分工作，但'＃bottom'仍然挂在'＃content'的底部。 – 2012-08-13 08:51:36

答

如果我理解正确 - firefox几乎与规格同步。你可以看到它的细节here

现在回答“为什么”的问题（其他人已经回应了如何:)。根据我的理解，规范没有陈述（重新）计算页面滚动的位置。这几乎是与实施有关的IMO。如果绝对定位的元素不存在相对定位的父元素，则它相对于可显示的视口/窗口进行定位。所以如果你打开Firebug，你会发现从firebug窗口顶部的元素是bottom:0。如果你滚动它的价值似乎没有重新计算。

当你开始对窗口进行定位并且你应该知道其中的影响时（你可能偶然发现了其中一个:)，最好将它包装在像@Rohit建议的父级div中，或者使用像@thenewguy提到

位置：绝对在Firefox中

相关推荐