3

サイドバーの境界内でコンテンツをスクロールしたいサイドバーがあります。また、サイドバーの境界の外に広がる「フライアウト」div も必要です。そのようなことは可能ですか？

これが私のアプローチを示すための jsFiddle です: http://jsfiddle.net/Takanudo/NE53A/3/

2 つのサイドバーがあります。サイドバー 1 のオーバーフローは auto に設定されています。サイドバー 1 では、フライアウトはサイドバー 1 の境界を超えません。サイドバー 2 では、オーバーフローが表示されるように設定されています。サイドバー 2 では、フライアウトが目的どおりに機能します。残念ながら、Sidebar 2 はスクロールしなくなりました。スクロール サイドバーと、境界を越えて広がるフライアウトの両方を使用できますか? 私のアプローチは間違っていますか？

私が使用しているCSSは次のとおりです。

#main{
  float: left;
}
#sidebar2{
  background: yellow;
  width: 200px;
  height: 500px;
  float: right;
  overflow: visible;
}
#sidebar1{
  background: orange;
  width: 200px;
  height: 500px;
  float: right;
  overflow: auto;
  margin-right: 50px;
}
.content{
  border: 1px solid red;
}
.options{
  background: blue;
  color: white;
  text-align: right;
  height: 20px;
  cursor: pointer;
}
.flyout{
  background: green;
  position: relative;
  width: 500px;
  height: 150px;
  top: 0;
  left: -300px;
  text-align: left;
  display: none;
}
4

1 に答える 1

0

これは、JS の回避策を備えた実用的なフィドルです。 http://jsfiddle.net/7TFn4/

.flyoutに設定されていposition:absoluteます。

$(".options").click(function(){
    $(".flyout", this).toggle();
    var offset = $(this).offset();
    $(this).children('.flyout').css('left',offset.left-300);
    $(this).children('.flyout').css('top',offset.top);
});
于 2013-05-22T07:27:40.187 に答える