在溢出隐藏容器外显示元素

时间：2014-06-19 07:48:57

标签： javascript html css

我有一个<table>可以通过将其包裹在<div>固定高度来实现滚动。

此<table>有一个下拉组件（图片中2nd行的1st列中的蓝色容器，以及下面给出的jsfiddle ）隐藏在容器<div>。我希望它能显示所有选项。

current output

JSFIDDLE（示例）

如何将下拉组件带到容器<div>之外以显示所有选项，如下图所示？

desired output

如果我删除pRelative容器，则下拉列表完全可见 - 但是当我滚动时，下拉列表不会随着它的容器滚动。

提前致谢。

PS：仅寻找CSS / javascript解决方案。

8 个答案:

答案 0 :(得分：8)

您可以将下拉列表的定位更改为fixed并使用js处理滚动，如下所示。

var main = document.getElementsByClassName('main')[0];
var dd = document.getElementsByClassName('pAbsolute')[0];
var offset = dd.getBoundingClientRect().top;
main.onscroll = function() {
  var st = main.scrollTop;
  ddt = (offset - st);
  dd.style.top = ddt + 'px';
}
.main {
  height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.pRelative {
  position: relative;
}
.pAbsolute {
  position: fixed;
}
.dropdown {
  width: 100px;
  background-color: cornflowerblue;
  z-index: 1000;
}
.option {
  border-top: 1px solid green;
  border-bottom: 1px solid green;
}
table td {
  border: 1px solid black;
  padding: 10px;
}
<div class="main">
  <table>
    <tr>
      <td>row1 column1</td>
      <td>
        <div class="pRelative">
          <div class="pAbsolute dropdown">
            <div class="option">Zero</div>
            <div class="option">One</div>
            <div class="option">Two</div>
            <div class="option">Three</div>
            <div class="option">Four</div>
            <div class="option">Five</div>
            <div class="option">Six</div>
          </div>
        </div>
      </td>
      <td>row1 column3</td>
    </tr>
    <tr>
      <td>row2 column1</td>
      <td>row2 column2</td>
      <td>row2 column3</td>
    </tr>
    <tr>
      <td>row3 column1</td>
      <td>row3 column2</td>
      <td>row3 column3</td>
    </tr>
    <tr>
      <td>row4 column1</td>
      <td>row4 column2</td>
      <td>row4 column3</td>
    </tr>
    <tr>
      <td>row5 column1</td>
      <td>row5 column2</td>
      <td>row5 column3</td>
    </tr>
    <tr>
      <td>row6 column1</td>
      <td>row6 column2</td>
      <td>row6 column3</td>
    </tr>
    <tr>
      <td>row7 column1</td>
      <td>row7 column2</td>
      <td>row7 column3</td>
    </tr>
    <tr>
      <td>row8 column1</td>
      <td>row8 column2</td>
      <td>row8 column3</td>
    </tr>
  </table>
</div>

Demo

<强>更新

您可以通过创建新的堆叠上下文来解决margin-top问题。

（仅在safari 6.1 mac中测试过 - 遗憾的是在任何最新的浏览器中都不起作用） Updated Demo或Another Demo

<强>更新

唯一可能的跨浏览器解决方法我可以找到隐藏固定元素溢出是剪辑容器（这要求它是一个定位元素）

var main = document.getElementsByClassName('main')[0];
var dd = document.getElementsByClassName('pAbsolute')[0];
var offset = dd.getBoundingClientRect().top;
main.onscroll = function() {
  var st = main.scrollTop;
  ddt = (offset - st);
  dd.style.top = ddt + 'px';
}
.main {
  height: 100px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-top: 100px;
  position: absolute;
  clip: rect(auto, auto, 99999px, auto);
}
.pRelative {
  position: relative;
}
.pAbsolute {
  position: fixed;
}
.dropdown {
  width: 100px;
  background-color: cornflowerblue;
  z-index: 1000;
}
.option {
  border-top: 1px solid green;
  border-bottom: 1px solid green;
}
table td {
  border: 1px solid black;
  padding: 10px;
}
<div class="main">
  <table>
    <tr>
      <td>row1 column1</td>
      <td>
        <div class="pRelative">
          <div class="pAbsolute dropdown">
            <div class="option">Zero</div>
            <div class="option">One</div>
            <div class="option">Two</div>
            <div class="option">Three</div>
            <div class="option">Four</div>
            <div class="option">Five</div>
            <div class="option">Six</div>
          </div>
        </div>
      </td>
      <td>row1 column3</td>
    </tr>
    <tr>
      <td>row2 column1</td>
      <td>row2 column2</td>
      <td>row2 column3</td>
    </tr>
    <tr>
      <td>row3 column1</td>
      <td>row3 column2</td>
      <td>row3 column3</td>
    </tr>
    <tr>
      <td>row4 column1</td>
      <td>row4 column2</td>
      <td>row4 column3</td>
    </tr>
    <tr>
      <td>row5 column1</td>
      <td>row5 column2</td>
      <td>row5 column3</td>
    </tr>
    <tr>
      <td>row6 column1</td>
      <td>row6 column2</td>
      <td>row6 column3</td>
    </tr>
    <tr>
      <td>row7 column1</td>
      <td>row7 column2</td>
      <td>row7 column3</td>
    </tr>
    <tr>
      <td>row8 column1</td>
      <td>row8 column2</td>
      <td>row8 column3</td>
    </tr>
  </table>
</div>

Demo

答案 1 :(得分：2)

您可以使用旧的<select>下拉列表获得所需的功能：

<强> Working Example 

<div class="main">
    <table>
        <tr>
            <td>row1 column1</td>
            <td>
                <select class="dropdown">
                    <option class="option">Zero</option>
                    <option class="option">One</option>
                    <option class="option">Two</option>
                    <option class="option">Three</option>
                    <option class="option">Four</option>
                    <option class="option">Five</option>
                    <option class="option">Six</option>
                </select>
            </td>
            <td>row1 column3</td>
        </tr>

答案 2 :(得分：0)

只要下拉是.main的孩子，单独使用CSS是不可能的。那是因为你的.main有overflow-y: scroll;你不能吃蛋糕而且也吃。

答案 3 :(得分：0)

这里的问题是你想要下拉到＆＃34;转义＆＃34;它的父母，同时与父母保持联系。这是AFAIK无法实现的。

如果你完全放下下拉菜单，那么你就可以绑定＆＃34;它在直接父链中与position: relative最近的元素，或者如果html元素没有这样的元素。有一个＆＃34;技巧＆＃34;如果你没有提供任何top/bottom/left/right - 值，那么元素仍将自己定位在内联的位置。

这就是为什么当我们移除相对定位的包装纸时，绝对定位的下拉式＆＃34;逃脱＆＃34; overflow-y: hidden;上的.main值（因为它会附加到html - 元素）。这也意味着只要没有滚动html元素，它的位置就不会受到影响。

如果在.main内部有一个相对定位的包装器，则下拉菜单会像其他任何内容一样被切断。

答案 4 :(得分：0)

这是你在找什么？的 LINK

HTML：

<td class="hover">hh
  <ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>      
  </ul>
</td>

CSS：

td.hover {
    text-align: left;
    list-style: none;        
}
td.hover ul {
    padding: 0;
    position: absolute;
    top: 28px;
    width: 150px;       
    opacity: 0;
    visibility: hidden;       
}
td.hover ul li {
    background: #555;
    display: block;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}
td.hover ul li:hover {
    background: #666;
}
td.hover:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

答案 5 :(得分：0)

try this ,


   <div class="main">
    <table>
        <tr>
            <td>row1 column1</td>
            <td>
                <div class="pRelative">
                    <div class="pAbsolute dropdown">
                        <div class="option">Zero</div>
                        <div class="option">One</div>
                        <div class="option">Two</div>
                        <div class="option">Three</div>
                        <div class="option">Four</div>
                        <div class="option">Five</div>
                        <div class="option">Six</div>
                    </div>
                </div>
            </td>
            <td>row1 column3</td>
        </tr>
        <tr>
            <td>row2 column1</td>
            <td>row2 column2</td>
            <td>row2 column3</td>
        </tr>
        <tr>
            <td>row3 column1</td>
            <td>row3 column2</td>
            <td>row3 column3</td>
        </tr>
        <tr>
            <td>row4 column1</td>
            <td>row4 column2</td>
            <td>row4 column3</td>
        </tr>
        <tr>
            <td>row5 column1</td>
            <td>row5 column2</td>
            <td>row5 column3</td>
        </tr>
        <tr>
            <td>row6 column1</td>
            <td>row6 column2</td>
            <td>row6 column3</td>
        </tr>
        <tr>
            <td>row7 column1</td>
            <td>row7 column2</td>
            <td>row7 column3</td>
        </tr>
        <tr>
            <td>row8 column1</td>
            <td>row8 column2</td>
            <td>row8 column3</td>
        </tr>
    </table>
</div>


**Css**


body{
  position:relative;
}
.main {
    height: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.pAbsolute {
    position: absolute;
}
.dropdown {
    width: 100px;
    background-color: cornflowerblue;
    z-index: 1000;
}
.option {
    border-top: 1px solid green;
    border-bottom: 1px solid green;
}

table td{
    border: 1px solid black;
    padding: 10px;
}

答案 6 :(得分：-1)

这是一个有效的技巧。但一定要自己测试。

从位置变化你的班级：相对于固定位置。

.pRelative {
    position: fixed;
}

这是 DEMO

答案 7 :(得分：-2)

你想这样吗，

FIDDLE

我删除了position:relative

的.pRelative
相关问题
最新问题