0

私は、絶対に配置され、メインコンテンツの上に伸びるドロップダウンメニューを備えた左側のフロートサイドバーを持っています。

メインコンテンツには、サイドバーの下に配置してはならない背景色があります。

一部のコンテンツには、絶対的に配置され、そのコンテンツが親の境界を超えて拡張されているドロップダウンも含まれています。

コンテンツはブロック単位です。ブロックはサイドバーの左側に完全に浮かぶ必要があります。または、サイドバーがクリアされると、ブロックは水平方向の幅全体を占める必要があります。

通常、コンテンツのドロップダウンを除いて、これらのルールはすべて満たすことができます。これは、背景が含まれるため、コンテンツ要素に「overflow：hidden」を適用することによって行われます。ただし、この場合、コンテンツ領域のドロップダウンは、親の垂直境界を超えて拡張され、非表示になるため、問題が発生します。（問題を強調するために、デモでは「非表示」ではなく「オーバーフロー：スクロール」を使用しました）。

編集して追加：「overflow-x：hidden」とoverflow-y：visible'のみを使用してみましたが、何らかの理由で機能しません。

これがフィドルです

または、ここにhtmlとcssがあります。

<body>
  <div id="sidebar">
    <div id="sidebar_dropdown">
        sidebar_dropdown
    </div>
  </div>
  <div class="content">
    some content
  </div>  
  <div id="content_2">
    something more content with an absolutly positioned drop down.
    <div id="dropdown">
      dropdown content
      <br/>
      dropdown content
      <br/>
      dropdown content
      <br/>
      dropdown content
      <br/>      
      dropdown content
      <br/>   
      dropdown content
      <br/>           
    </div>
    <br/>
    <br/>
    <br/>
    some content hidden by dropdown.
  </div>
    <div class="content">
    some content
  </div> 
  <div class="content">
    some content
  </div> 
  <div class="content">
    some content
  </div>     
</body>

css：

#sidebar {
  float: right;
  margin:0 1em;
  background-color: #8888ff;
  height: 10em;
  width: 5em;
  position:relative;
}

#sidebar_dropdown {
  position: absolute;
  right: 0;  
  top: 1em;
  background-color: #888888;    
}

.content {
  margin: 1em 0;
  background-color: #ff8888;
  overflow: hidden;
}

#content_2 {
  margin: 1em 0;
  background-color: #88ff88;
  position: relative;
  overflow: scroll;    
}

#dropdown {
  background-color: #88ffff;
  position: absolute;
}
4

2 に答える 2

0

コンテンツドロップダウンをjsで挿入することでこの問題を解決しました（これはすでに行っていたので、ajax経由で入力されるため問題ありません）。

属しているテキストボックスに対して相対的に挿入する代わりに、本文の上部に挿入し、テキストボックスから位置を計算しました。したがって、「overflow hidden」が適用されているコンテンツ プレーンよりもレンダー ツリーの上位にあります。

于 2013-02-21T08:05:56.317 に答える
0

絶対要素で overflow:hidden を使用する場合 (あなたの場合)、親を反映する別の絶対要素でそれらをラップする必要があります (幅と高さは同じでなければなりません)。

HTML

<div id="hideOverflow">
    <div id="sidebar_dropdown">
        sidebar_dropdown
    </div>
</div>

CSS

#hideOverflow { width: 5em; height: 10em; position:absolute; overflow:hidden; }
于 2013-02-20T18:14:02.907 に答える