0

私は長い間この問題と格闘してきました。私の問題の部分に対するいくつかの良い解決策を見つけましたが、どれも組み合わせて機能しないようです。

これはウェブサイトのスクリーンショットです：

http://i.stack.imgur.com/6C0k1.jpg

私が達成したいと思っているのは、コンテンツが青いコンテナ、div 自体の右端ではなく、すべてのコンテンツを含む div をオーバーフローしたときに、ページの右端にスクロール バーを表示することです。 divをoverflow: autoまたはoverflow: scrollに設定した場合。

つまり、div ではなく、ページをスクロールしたいのです。

サイトは基本的に、ボディの背景、メニューの div、およびコンテンツの div で構成されます。コードはかなり面倒なので省きましたが、必要な場合はコメントを残していただければすぐに追加します。

右側の青いコンテナ内のコンテンツを除いて、すべてが scrn ショットのように固定されているはずです。最初は、コンテナ以外のすべてをposition:fixedに設定すると機能し、div をスクロールするために使用できるページにスクロール バーが表示されると考えていましたが、そうではありませんでした。ただし、コンテナ内の目に見えるオーバーフローはページを「離れる」だけなので、これは機能しません。スクロール バーをトリガーしません。

scrn ショットでも指摘したように、container-div は上下にパディングがあり、わずかに透明です。

これらの 2 つの機能により、事態はさらに難しくなっているようです。パディング。overflow : visualを設定するとコンテンツがオーバーフローし、パディングを介しても表示されるためです。パディングを非表示にするために、パディングを切り取ってコンテンツ自体よりも高い z-index を与えることはできないため、透明性は問題です。それはまだそれを通して見えます。背景画像はパーセンテージで設定されるか、「カバー」に設定されます (どちらが最適かはまだわかりません)。そのため、背景画像がカバーするセグメントでパディングを切り取っても機能しません。

私の問題と問題を十分に明確に提示したことを願っています。ご質問やご意見がございましたら、コメントを残してください。

返信ありがとうございます、マグナス

注:これは、評価を下げる前に適切に読み通さなかった誰かによって破棄された初期の質問の再投稿です。質問は本質的にその後死にました。今回はより分かりやすくするように努めたので、繰り返したら申し訳ありません。今回記事が長くなったのもそのせいです。

4

2 に答える 2

1

このようなもの？

デモ: http://jsfiddle.net/6R7c2/

HTML:

<div id="top">Top</div>
<div id="middle">
    <div>Content
    </div>
</div>
<div id="bottom">Bottom</div>

CSS:

html,body{
    width:100%;
    height:100%;
    margin:0;
}
#top,#bottom{
    height:10%;
    background:blue;
    color:white;
}
#middle{
    height:80%;
    overflow:auto;
}

#middle>div{
    height:10000px;
    border:25px solid red;
}
于 2012-09-23T19:49:54.413 に答える
0

それはこのようなものになることができます

http://jsfiddle.net/QfsvB/を参照

CSS

div.scroll 
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}

HTML

<div class="scroll">You can use the overflow property when you want to have better control of the layout, the overflow property specifies what to do if the content of an element exceeds the size of the element's box.</div>
于 2012-09-23T19:55:42.393 に答える