固定位置使元素移動

我有一個有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

來源

2012-10-07 lonewulf

圖像的最小寬度是現在死了使問題少明確。 –

爲設計目的，表有限制（這只是我的意見:-)）。如果你堅持你的代碼，那麼你可以使用這種佈局。

你的形象應該有1010px（10px的邊框，990px內容，10px的邊框）

<!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從960.gs

來源

2012-10-07 18:35:39

實際上，我不是將樣式應用於td，而是創建了一個div，以便它可以用作圖像的容器並解決問題。我不得不將td的寬度設置爲10（例如div）。 – lonewulf

示例圖像背景http://imageshack.us/a/img543/9219/verticalc.jpg –

對於您的代碼，您必須使用大背景圖片（我認爲身高：100％;不適用於大多數瀏覽器），如果你的內容區域比窗口小。 –

固定位置​​使元素移動

回答

相關問題

固定位置使元素移動