寬度100％與固定的位置

我有帶側邊欄的頁面。這裏有張桌子。無論桌子有多大，我都希望在屏幕底部顯示一行。這行應該與表格具有相同的寬度。寬度100％與固定的位置

這裏是我嘗試過，但沒有成功：

<div style="width: 100%; position: relative;"> 
    <table> 
      ... 
    </table> 

    <!-- this div will be width as whole page, not as table --> 
    <div style="width: inherit; position: fixed; bottom: 0;">Wuah!</div> 
</div>

告訴我請一些建議如何使工程:)
這是一個活生生的例子，側邊欄包括：http://other.dttrading.sk/orders.htm

來源

2012-08-07 Draex_

你有問題嗎？ – 2012-08-07 22:49:47

@amiregelz問題是側邊欄。如果將它們添加到頁面中，則最後一行將比表格更寬，並且會干擾側邊欄。 – 2012-08-07 22:55:59

你能發佈相關代碼，包括側邊欄嗎？ – amiregelz 2012-08-07 22:56:53

的問題是，fixed元素相對於視，不是他們的父母固定的，他們就會將繼承視口的寬度了。您可以通過檢查DOM來檢查固定頁腳是否與<body>具有完全相同的寬度。

一個可能的解決方法：

給它left: 0讓頁腳是側邊欄
添加頁腳中另一個容器後面左對齊頁腳
設置一些z-index值，抵消它向右移動，並將內容置於其中。

（未測試）

來源

2012-08-07 23:27:06 bfavaretto

z-index不適用於該位置：固定div - 始終位於頂部 – 2012-08-08 12:07:26

@PeterDraexDräxler'z-index'可能有點棘手，但它適用於固定元素。參見[demo]（http://jsfiddle.net/SbVUN/）。 – bfavaretto 2012-08-08 12:42:06

你能給我提示如何在現場示例中設置z-indexes？ – 2012-08-08 20:02:56

您應該使用包含表格的<div>來格式化它們，而不是單獨格式化它以使其格式化爲表格。

<div style="width: 100% position: relative;"> 
    <!-- this next div is what you should use to format the table and line --> 
    <div style ="width: how big you want your table AND line"> 
    <table> 
      ... 
    </table> 
    </div> 
    <!-- this div will be width as whole page, not as table --> 
    <div style="width: inherit; position: fixed; bottom: 0;">Wuah!</div> 
</div>

來源

2012-08-07 22:49:41 Dylan

你能舉個例子嗎？ – 2012-08-07 23:19:34

寬度100％與固定的位置

回答

相關問題