1

我正在尝试将一个简单的 2 列页面放在一起，左侧是文本，右侧是各种徽标和东西。在右栏的最底部，我需要放置一些文本。一个简单的position: absolute; width: 250px; bottom: 0;似乎就是我所需要的。这是我想出的代码，也托管在这里：

<!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，将其锁定在屏幕底部，而不是元素底部（通常不在屏幕底部）。我似乎找不到其他人有这个问题，这意味着我做错了什么。我已经搞砸了几个小时，但结果一直没有改变。任何帮助将非常感激。

4

3 回答 3

1

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

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

当您开始相对于窗口进行定位时，事情确实变得有趣并且您应该知道影响（您可能偶然发现其中之一:) 最好将它包装在像@Rohit 建议的父 div 或使用像 @thenewguy 提到的浮动

于 2012-08-13T06:40:17.570 回答
0

你让这变得比它需要的更困难。该答案基于您的描述，但我相信它应该适合您。另外，我将根据内部的百分比来执行此操作，因为我不相信使用像素（与移动设备打交道使我远离了那个）。它是这样的：

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 的高度不同，那么您在两个部分之间创建的垂直线将不会一直向下。让我知道这是如何工作的，我会看看我能做些什么来进一步帮助你。

**仅供参考，我倾向于远离使用表格进行样式设置。一旦您的网页变得相当复杂，它们往往会变得难以处理。Divs 和其他元素往往效果更好。

于 2012-08-13T06:32:41.190 回答
0

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

现场演示

代码是 

    <!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>
于 2012-08-13T06:23:55.970 回答