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

Question

我已经创建了自己的下拉列表，但我对它的宽度有疑问。我有 #leftDiv 占页面的 30%，然后是我的下拉列表，它应该占 #leftDiv 的 100% 宽度。它确实如此，但我的列表(在单击时出现)是绝对定位的，并且占据了窗口本身的 100%。即使我将宽度设置为 30%，它也占据了整个页面的 30%。如何使我的列表大小相同？这是 fiddle :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%; */
}