Question

我正在尝试将左侧带有文本的简单2列页面和右侧的各种徽标和内容组合在一起。在右栏的最底部，我需要放置一些文字。一个简单的position: absolute; width: 250px; bottom: 0;似乎就像我需要的一样。这是我提出的代码，也是托管here：

<!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以外的所有浏览器。 Firefox将元素设置为position:fixed，将其锁定在屏幕底部，而不是元素的底部（通常位于屏幕底部）。我似乎无法找到其他人遇到这个问题，这意味着我做错了什么。我已经搞砸了好几个小时，但结果一直没变。任何帮助将不胜感激。

Answer 1

如果我理解正确的话 - firefox几乎与规范同步。您可以查看有关它的详细信息here

现在回答“为什么”的问题（其他人已经回应了:)。根据我的理解，规范没有说明（重新）计算页面滚动的位置。这几乎是依赖于实现的IMO。如果绝对定位的元素不存在相对定位的父元素，则它相对于可显示的视口/窗口定位。因此，如果您打开Firebug，您将从firebug窗口顶部找到元素bottom:0。如果你滚动它的值似乎没有被重新计算。

当你开始相对于窗口进行定位时，事情确实很有趣，你应该知道其中的反响（你可能偶然发现了其中一个:)最好将它包装在像@Rohit建议的父div中或者像@ @那样使用浮点数thenewguy提到

Answer 2

使用两个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>

Answer 3

你正在使它变得比它需要的更困难。这个答案是基于你的描述，但我相信它应该适合你。此外，我将根据内部的百分比来做这个，因为我不相信使用像素（处理移动设备已经引导我远离那个）。在这里：

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和其他元素往往效果更好。

位置：Firefox中的绝对值

3 个答案: