我知道這已被問了很多次,但沒有給出的解決方案爲我工作。作爲膽量的基本示例可以看到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完成的事情,那麼我也會接受這一點。儘管我對這三種語言都是全新的,但請溫柔!
你最終解決了你的問題嗎? –