位置固定 <td> 使元素移动答案

【问题标题】：Position fixed <td> makes element move位置固定 <td> 使元素移动
【发布时间】：2012-09-28 02:14:06
【问题描述】：

我有一个有 3 列的表。我使用中间列作为内容，另外 2 列有一个图像作为边框，如下所示：

 border -->   ||HEADER  ||  <--- border
              ||NAV     || 
              ||CONTENT ||
              ||        ||
              ||FOOTER  ||

我必须使用固定位置，以便在页面滚动时边框不会移动，这是我的代码：

 <td style="background-image:url(images/vertical.jpg); width:10px; height:100%; background-repeat:repeat-y; vertical-align:top; position:fixed;"></td>

问题是，当使用固定位置时，我的边框图像会在主要内容内移动，这会弄乱我的布局。奇怪的是，这只发生在左 td 上。我的主要内容的宽度固定为 990px。

有什么想法吗？

显示问题的屏幕截图：

http://imageshack.us/a/img571/3016/tableg.jpg

【问题讨论】：

图像现在已经死了，使问题不太清楚。

标签： css position html-table border

【解决方案1】：

出于设计目的，表格有限制（这只是我的意见:-)）。如果你坚持你的代码，那么你可以使用这个布局。

您的图片的最小宽度应为 1010 像素（10 像素边框，990 像素内容，10 像素边框）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{
    min-width: 1010px;
    background:url(images/vertical.jpg) top center repeat-y;
    margin:0;
}
.wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 990px;
}
.contenttable{
    width: 990px;
    margin:0;
    padding:0;
}
</style>
</head>
<body>
    <div class="wrapper">
    <table class="contenttable">
        <tr>
        <td>content goes here</td>
        <tr>
    </table>
    </div>
</body>
</html>

你也可以试试custom Grid CSS generator from 960.gs

【讨论】：

实际上，我没有将样式应用到 td，而是创建了一个 div，以便它可以用作图像的容器并解决了问题。我不得不将 td 宽度设置为 10（就像 div 一样）。
对于您的代码，如果您的内容区域小于窗口，您必须使用大背景图片（我认为高度：100%；不适用于大多数浏览器）。
如果我的建议对你有帮助，别忘了投票（感谢）..谢谢。 :)