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

Question

我创建了自己的下拉列表，但我的宽度有问题。我有#leftDiv需要30％的页面，然后是我的下拉列表，它应该采取100％宽度的#leftDiv。它确实如此，但是我的列表在点击时出现，绝对定位并占据了窗口本身的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

您需要采取以下步骤。

为position: relative;添加#leftDiv。

#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);
}

从width:删除#typeDropDownList财产：

#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;
}

而oops，现在是隐藏下拉列表的一部分。那是因为它现在相对于settingsDiv和settingsDiv的高度不考虑扩大下拉。

当下拉菜单设置为absolute时，settingsDiv无法自动更改高度以适应没有JS的下拉列表，您可以硬编码settingDivs的高度：

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

---

但是您希望settingsDiv高度自动适应下拉列表的高度？

然后从position: absolute中删除#typeDropDownList。

但是下拉必须绝对吗？

然后从overflow: auto;中删除#settingsDiv - 所以当下拉列表扩展时，它会溢出settingsDiv，而不是被包含在里面。