2013-11-02 98 views
2

我知道這已被問了很多次,但沒有給出的解決方案爲我工作。作爲膽量的基本示例可以看到here和方便的視覺指南here將div右移到頁面底部

所以這是左邊的棕色div給出了問題。它完全是空的,純粹是裝飾的,沒有任何東西,只有背景。 (粉紅色的很好,他們正是我所告訴他們的。)顯然,對於棕色的div,使得身高:100%;只能延伸到瀏覽器窗口的底部。如果粉色div的內容使頁面滾動,棕色不會再向下滾動。那些沒有工作

人造列 你可以從便利視覺引導見

解決方案,我已經得到了內容的div基本上使它成爲一個側面滾動的佈局 - 目前多達10個div向右延伸約10,000個像素。由於虛擬列基本上需要在包含列的情況下製作背景圖像,並且因爲我的背景是圖案,所以產生的10,000px寬的圖像會嚴重影響加載時間。

指定棕色div的像素高度 內容div不是標準高度。在某些頁面上,瀏覽器窗口底部以下的最長時間只有幾百個像素,其他時間則有幾千個像素。製作棕色格子x千像素高以覆蓋它們都是不整潔和懶惰的,我真的不想訴諸於此。

雙背景圖像 我發現CSS3的一點是,您可以爲身體背景設置兩個背景圖像。我差點拿到這個了!有沒有爲單獨圖像指定確切的細節的方法? (例如,設置whitepaper.jpg重複,然後brownpaper.jpg重複-y)如果可以完成,那麼我已經得到它,但就我看到兩幅圖像必須具有相同的屬性而言,這意味着再次使列圖像延伸數千個像素,並且使其成爲.png以使其透明以查看背後的白色。

將body和html的高度設置爲100% 沒有做任何事情。它實際上破壞了粉紅色表演中的某些東西。

代碼(該事項)上如何加以固定

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <style type="text/css"> 
    html, body {height:100%; margin:0; padding:0;} 
    body 
{ 
    font-family: conquerorsans, Tahoma, verdana, sans-serif; 
    font-size: 18pt; 
    color: #9e8166; 
    letter-spacing:2px; 
    background-color: #e6e0d5; 
    background-image:url(images/layout/whitepaper.jpg); 
    background-repeat: repeat; 
    background-position:top left; 
} 

    #top-trim 
{ 
    position:absolute; 
    left:90px; 
    top:0px; 
    height:20px; 
    width:550px; 
    background-image:url(images/layout/brownpaper.jpg); 
} 

#main-header 
{ 
    position:absolute; 
    left:90px; 
    top:90px; 
    height:100%; 
    bottom:0px; 
    margin-bottom:0px; 
    width:550px; 
    background-image:url(images/layout/brownpaper.jpg); 
} 
    </style> 
</head> 
<body> 

<header id="top-trim"> 
</header> 

<header id="main-header"> 
</header> 

<div style="position:absolute; top:400px; left:700px; width:20px;"> 
a dsg asd gf asdfg as dfg dfsag df g dfa g afd ga df ga fg a sg a g ag a ga fsa fas dg  a sfdg asd g asd ga dsg adsg as dg as g ar ga rg a g asd ads f asd f dsf asd dsaf asd f sda fasd f ads fsd sd dsf asdf a sdgsda f asd a ds fa sdf ads fads f as d asdf sd a sdf asd f asdf asd f asd f ds fsda f f d ads fad sf asd asd sd f asd f a f ds asd fa fa ss ad 
</div> 

</body> 
</html> 

思考? 我可以在上下滾動時將div設置爲固定,但是可以向左和向右滾動嗎?

我得出的結論是,這不能用CSS來完成。如果這是可以用javascript,jQuery甚至PHP完成的事情,那麼我也會接受這一點。儘管我對這三種語言都是全新的,但請溫柔!

+0

你最終解決了你的問題嗎? –

回答

0

首先你的榜樣不起作用

第二關,這將是最容易通過給予棕色position:absolute,風格它,你會漂浮同樣的方式做,彌補利潤率,並給予其父母position:relative。您沒有提供CSS對我來說,能夠將其重新正是你想要什麼,但下面的演示應該是所有你需要實現一個修復

Demo Here

0

我從http://bloogum.net/wp_testing/test1.html注意到,文字是插入外

<header id="main-header"><div style="width: 20px; left: 700px; top: 400px;">a dsg asd gf asdfg as dfg dfsag df g dfa g afd ga df ga fg a sg a g ag a ga fsa fas dg a sfdg asd g asd ga dsg adsg as dg as g ar ga rg a g asd ads f asd f dsf asd dsaf asd f sda fasd f ads fsd sd dsf asdf a sdgsda f asd a ds fa sdf ads fads f as d asdf sd a sdf asd f asdf asd f asd f ds fsda f f d ads fad sf asd asd sd f asd f a f ds asd fa fa ss ad 

#main-header { 
    background-image: url("images/layout/brownpaper.jpg"); 
    background-repeat: repeat-y; 
    bottom: 0; 
    display: block; 
    left: 90px; 
    margin-bottom: 0; 
    top: 90px; 
    width: 30px; 

}

小心使用位置:絕對屬性和高度不應該是100%嘗試使用自動或省略它。