2016-04-26 12 views
0

私は、子と子を持つサイドバーナビゲーションメニューを持っています。ここにjsfiddleのリンクがあります:https://jsfiddle.net/s096zfpd/オーバーフロー内でスクロールする:visible; div、子のコンテンツが親の高さを超えたとき

これは明らかに私が達成しようとしていることのアイデアを与えるために単純化されています。私の問題は、<nav>のリストが<nav>の高さを超えることがあるということです。この場合、<nav>の範囲内でスクロールできるようにしたいのですが、overflow-x:visibleプロパティを妥協すると、.sub-navと表示する必要があります。これは、CSSが単にoverflow-x:visibleoverflow-y:scrollの同時使用を許可しないためです。

おそらくjsソリューションがうまくいくと思っています。助言がありますか?

ありがとうございました。

+0

を共有jsfiddleと共有リンクを作成してください。 –

+0

これは、https://jsfiddle.net/s096zfpd/ –

答えて

0

overflow-xまたはoverflow-yのいずれかに表示されていて、他のものが表示されていない場合は、可視値はそれは我々が目に見えると同じDOM要素に隠さ適用できないことを意味オートとして解釈されるので、理想的な解決策は

  • ラッパーを作成し、二つの異なるDOM要素にoverflow-xoverflow-yを適用することであろう。 JSあなたの問題を解決フィドル

    https://jsfiddle.net/e2edvupc/

+0

です。両方の要素に意図的に 'overflow-x'を使用しましたか?私はこれが解決策であるかどうか分からない。私は垂直方向にスクロールするためにリスト全体を必要とし、ホバー上で '.sub-nav 'を見えるようにしておきます。 '.sub-nav'にはあふれたコンテンツはありません。そのため、その要素に' overflow'プロパティがあるのは意味がありません。 最新のjsfiddleを提供できますか? –

+0

私が共有しているjsfiddleリンクを確認してください。問題が解決したら、私の答えに完全なマークを付けてください。 Thanks –

+0

ありがとうございますが、このアイデアでは '.sub-nav'内のリンクをクリックすることはできません。現在のところ、解決策ではありません。私はこれを修正するためにjsを使わなければならないかもしれないと思う。 –

関連する問題