0

我有一个带有下拉菜单的左侧浮动边栏，该菜单绝对定位并延伸到主要内容之上。

主要内容的背景颜色不得低于侧边栏。

一些内容还包含一个绝对定位的下拉菜单，其内容超出其父边界。

内容以块为单位。块应该完全浮动到侧栏的左侧，或者一旦侧栏被清除，它们应该占据整个水平宽度。

通常，除了内容中的下拉菜单外，所有这些规则都可以满足。这将通过对内容元素应用“溢出：隐藏”来完成，因为这将包含背景。但是在这种情况下，内容区域中的下拉菜单会导致问题，因为它会扩展超出其父垂直边界并导致它被隐藏。（我在演示中使用了“溢出：滚动”而不是“隐藏”来突出问题）。

编辑添加：我试过只使用'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

如果你想在绝对元素上使用溢出：隐藏 -在你的情况下- 你将不得不用另一个反映它的父级的绝对元素包装它们（宽度和高度必须相同）。

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 回答
0

我通过使用 js 插入内容下拉列表解决了这个问题（我已经这样做了，所以这不是问题，因为它是通过 ajax 填充的）。

我不是相对于它所属的文本框插入它，而是在正文的顶部插入，然后从文本框计算它的位置。因此，它在渲染树上比应用了“溢出隐藏”的内容平面更高。

于 2013-02-21T08:05:56.317 回答