将百分比设置为绝对定位的元素

Question

我创建了自己的下拉列表，但是我的宽度有问题。我有 #leftDiv占用该页面的30％，然后是我的下拉列表，该列表应为#leftDiv的100％宽度。确实如此，但是我的列表在单击上出现，是绝对位置的，并占用了100％的窗口本身。即使我将宽度设置为30％，它也需要整个页面的30％。如何使我的清单变为相同的尺寸？这是小提琴：https：//jsfiddle.net/vaxobasilidze/rfwearbw/

按--- TYPE ---查看问题。这是我的下拉列表的样式：

#typeSelect {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(0,0,0,0.7);
    background-image:url(images/comment-bg.png);
    background-repeat:repeat;
    background-position:300px;
    width:353px;
    padding:5px;
    line-height:1;
    border-radius:4px;
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
    -webkit-appearance:none;
    /*box-shadow:inset 0 0 10px 0 rgba(0,0,0,0.6);*/
    outline:none;
    color: #b8c0c8;
    width: 100%;
    cursor: pointer;
}
#typeSelect li {
    width: 100%;
    list-style: none;
    position: relative;
}
#typeDropDownList {
    margin: 0;
    padding: 0;
    line-height:1;
    -webkit-appearance:none;
    outline:none;
    color: #b8c0c8;
    width: 100%;
    border-radius: 3px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    display: none;
    position: absolute;
    z-index: 100;
    width: 30%;
}
#typeDropDownList li {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    border-bottom: 1px solid rgba(0,0,0,0.7);
    background-image:url(images/cusel-bg-1.png);
    background-repeat:repeat;
    background-position:300px;
    padding:5px;
    width: 100%;
    cursor: pointer;
}
#typeDropDownList li:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
#typeDropDownList li:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.26);
}
#adapterSettings {
    background: url(images/comment-bg2.png);
    padding: 5px;
}

Answer 1

您需要采取以下步骤。

为#leftDiv添加position: relative;。

#leftDiv {
display: inline-block;
position: relative;
width: 30%;
height: 100%;
border-right: 3px solid rgba(0,0,0,0.2);
box-sizing: border-box;
float: left;
margin: 0;
padding: 0;
overflow: auto;
text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
}

从 #typeDropDownList删除 width:属性：

#typeDropDownList {
margin: 0;
padding: 0;
line-height: 1;
-webkit-appearance: none;
outline: none;
color: #b8c0c8;
width: 100%;
border-radius: 3px;
box-shadow: 0 2px 2px rgba(0,0,0,0.26);
display: none;
position: absolute;
z-index: 100;
/* width: 100%; */
}

Answer 2

首先，给出下拉式100％宽度：

#typeDropDownList {
  width: 100%
}

，您希望宽度相对于settingsDiv：

100％

#settingsDiv {
  position: relative;
}

和糟糕，现在下拉下的一部分被隐藏了。那是因为它现在是相对于settingsDiv和settingsDiv的高度考虑扩展的下拉菜单。

当将下拉设置为absolute时，settingsDiv无法自动更改高度以适合不使用JS的下拉列表，您可能可以硬代码settingDivs的高度：

#settingsDiv {
  position: relative;
  height: 230px;    }

---

，但是您希望设置高度自动适应下拉的高度？

然后从#typeDropDownList删除position: absolute。

，但是下拉必须是绝对的？

然后从#settingsDiv删除overflow: auto;-因此，当下拉列表扩展时，它会溢出settingsDiv，而不是内部包含。