0
これは既にそこにあるいくつかの質問と同様ですが、問題の原因となっているのは私の主要な背景ではないので、私は失われています。divの背景がビューポートで切断される
ウェブサイトでは、問題は、あなたのビューポートがコンテンツよりも小さいこと、その後、スクロールダウンして縮小する場合、左側の波線は、あなたのビューポートの底がもともとあった場所で停止していることであるhttp://www.thesweet-spot.com/test77
です。難しいのは、コンテンツが長すぎると左に波線がスクロールするようにしたいということです。
関連するCSSは次のようになります。
body {
background: url('images/background.jpg');
margin: 0;
padding: 0;
min-width: 1000px;
}
#container {
width: 100%;
position: absolute;
top: 105px;
bottom: 0;
margin: 0;
padding: 0;
}
#sidebarbg {
background: url('images/chocolate.jpg');
width: 300px;
height: 100%;
position: fixed;
left: 0;
z-index: 11;
background-attachment:fixed;
}
#sidebar {
background: url('images/sidebar.png');
width: 300px;
height: 100%;
position: absolute;
left: 0;
z-index: 12;
}
#contentnest {
position: absolute;
top: 50px;
left: 365px;
right: 0;
z-index: 14;
}
#content {
background: url('images/contentbg.png');
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-khtml-border-radius: 30px;
padding: 20px;
border: #f062a4 3px solid;
width: 80%;
min-width: 350px;
margin-left: auto;
margin-right: auto;
font-size: 22px;
line-height: 150%;
font-family: QuicksandBook, Tahoma, Arial, sans-serif;
color: #905131;
}
とHTMLは次のようになります。
<body>
<div id="sidebarbg"></div>
<div id="sidebar"></div>
<div id="container">
<div id="contentnest">
<div id="content">
<! -- content goes here -->
</div>
</div>
</div>
</body>
私は何をしないのですか？ #sidebarで
あなたのボディスタイルにこれを追加し、私は最初の解決策を試したときに、全体のサイドバーのdivが消えた - おそらく、それはの底部の下-9999emましたページ。私はtop：0を方程式に追加しようとしましたが、それは同じ元の問題を提示しました。 私が言ったように、私は波がコンテンツのスクロールで上下に動くようにしたいので、2番目の提案は実装できません。 – i7nvd
どうすれば上：0と下：-9999em？ –
はい、不明な点がありましたら申し訳ありません。それは私が試みたものですが、高さを100％に設定したのと同じ問題がありました。ビューポートがコンテンツよりも小さい場合、BGは切り捨てられます。私はコンテンツを編集したので、ビューポートよりも長いので、問題を見ることができます。 Firebugなどを使用してtopを0、bottomを-9999emに設定すると、問題は解決しません。 – i7nvd