垂直拉伸的div其母公司，而不是整個頁面

我試圖做這件事情，顯然會導致很多人頭疼的，我已經找到了一些附近的解決方案，但不完全是我所需要的。我想要一個左側邊欄div和右側主內容div。在這些之下，一個頁腳。在側邊欄中，我想從div的頂部到底部運行一個條帶，並填充背景圖像，並且我希望它停止在頁腳上方，與主內容div的高度相匹配，無論高度還是短。垂直拉伸的div其母公司，而不是整個頁面

如果你想看到我後，我提出了一個示例頁面在http://lumn.net/about.html。沒有一個鏈接是活躍的，代碼非常混亂 - 我本週只是在自學css。但至少你可以看到我設想的佈局。

我試着從<html>向下通過有問題的div聲明一堆「height：100％」，這樣就可以在整個頁面上展開，但不能匹配父窗口的高度。僅在「strip」div及其父母上使用「height：100％」似乎不會執行任何操作。我也試過「位置：絕對;頂部：0;底部：0」，這也沒有做任何事情。該div消失（因爲它沒有任何內容，但背景圖像）。

然後我嘗試了一個我在http://www.cssnewbie.com/equal-height-columns-with-jquery/找到的jQuery插件，但是我不知道如何正確調用它，或者在我的頁面中有些東西阻止了它的工作。

來源

2012-05-05 poetiscariot

所以你的問題則邊欄沒有延伸到尾？你的問題在你的問題是什麼時候有點朦朧。 –

是的。如果我以像素爲單位聲明高度，我只能看到它。我希望它在更長的頁面上伸展更長，短的更短。 – poetiscariot

你怎麼樣只是把側邊欄的內容DIV中的背景圖片，並使用

background: url('image.jpg') repeat-y; 
padding-left: 210px;

的主要內容div來讓它跑下來左側。像這樣：http://jsfiddle.net/JMC_Creative/dMbmP/

我知道這樣的結果並不完全像你的示例頁面，但是你能夠推斷出某些東西來爲你工作嗎？

來源

2012-05-05 00:46:14 JakeParis

需要'repeat-y'因爲它是垂直的（就像你在你的小提琴中一樣）。'Repeat-x'將不起作用。 –

@JT當然。謝謝，那就是我的意思。 – JakeParis

顛簸的背景就這樣沒有發生在我身上。儘管如此，我認爲我仍然需要div來成爲帶子本身的形狀，這樣我才能使陰影發生。 – poetiscariot

爲了相對大小正常工作，必須指定「位置：親屬」父和子對象，而母公司必須有指定的高度，無論是靜態的，相對或絕對的。

其次，你要流體相同高度列，所以你需要一個主塔，然後邊柱需要存在作爲主柱的孩子。然後簡單地爲左列聲明一個負的左邊距，右邊的一個右邊的右邊距。這是每個人都使用的技巧。

來源

2012-05-05 01:04:41 Jamie

從未見過那招。負利潤率是做什麼的？ – JakeParis

我沒有看到它是如何工作的 - 你能舉個例子嗎？我不認爲我見過的任何變化都會以這種方式使用空白。 – poetiscariot

檢查了這一點，這就是所謂的[液態佈局（http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/）。這個想法是，該列需要成爲中心列的孩子才能接收其屬性，但這並不一定意味着它必須從字面上_side_父列。 – Jamie

垂直拉伸的div其母公司，而不是整個頁面

回答

相關問題