2012-11-14 94 views
0

我想在我的網站(不是全身)的父容器中垂直拉伸圖像,它是與ID「div imagen-fondo」父母身高比孩子小,爲什麼?

我已經嘗試了任何backstretch插件,也只是與背景大小的CSS背景圖像來做到這一點。

但這兩種情況下的問題是,父容器的計算高度小於直接子高度,因此,背景圖像看起來比內容本身小。

我怎樣才能讓它和他的直系孩子一樣高,或者至少更大?

你可以看到現場演示在這裏:

http://50.21.181.12:3001/plantillas/mba 

Screenshot shows the height of the parent div

Screenshot shows the height of the child div

UPDATE:

我認爲這個問題是該div#imagen畫質,豐多越來越高度的窗口而不是他的內容,那就是當屏幕很大時,問題不會發生的原因,但是當它出現時,窗口的高度比它發生的內容時,你可以用這個兩個截圖檢查它,就像你開始滾動垂直背景圖像結束:

step 1, scroll to the top step2, scrolling a little shows that the background ends

一些與溢出?

更新2:

現在我介紹了一些JavaScript,使其工作,

獲取頁腳偏移位置和拉伸「.backstretch」的div到高度的高度。但是,如果您調整窗口大小以使垂直滾動條出現並檢查頁面,您仍然可以看到父容器「#imagen-fondo」(從哪裏backstretch應該自動獲得其高度)仍然得到可見視口的高度,而不是內容本身的高度。

如果有人發現一個更好的方法來做到這一點,CSS只會使用這種方法,而不是這個骯髒的方法。

+1

我已經在IE8,IE9,FF和Chrome上測試過它。在所有瀏覽器中,它看起來都很好 –

+1

嗨,它看起來取決於視口,一個大屏幕不會產生這個結果(我的Ubuntu盒子默認大小),但調整窗口的大小,例如1203 x 529使問題出現(#imagen-fondo高度小於#wrap高度) –

+0

好吧,我現在已經發現它發生了。更有趣的是,當你重新調整視口的高度時,它會一步一步地變得更好。 (至少在FF) –

回答

0

現在我介紹了一些JavaScript,使其工作,

閱讀頁腳位置和拉伸「.backstretch」的div到高度的高度。但是,如果您調整窗口大小以使垂直滾動條出現並檢查頁面,您仍然可以看到父容器「#imagen-fondo」(從哪裏backstretch應該自動獲得其高度)仍然得到可見視口的高度,而不是內容本身的高度。

如果有人發現一個更好的方法來做到這一點,CSS只會使用這種方法,而不是這個骯髒的方法。

0

使用clear清除浮動在父div中:both; 或在父div上使用clearfix。

+0

嗨,我已經添加了clearfixes,以檢查是否可以解決問題,您現在可以在網站中檢查它們,但它仍然發生相同情況:( –

+0

嗨,該網站目前無法正常工作。 –

+0

可能正在重置或更新,現在應該可以工作 –

相關問題