我有一个下拉菜单，我希望它可以扩展页面的全宽度。我刚刚开始设计下拉菜单的样式（下拉功能尚不可用）。我已经将宽度设置为100％，但仍然折断。这是因为我有一个宽度为1024px的页面包装程序吗？该包装器用于使所有内容居中并垂直对齐。我真的很辛苦，这已经花了我很多小时的调试时间，而且我仍然找不到我的代码出了什么问题。
<div id ="lower-header">
<div class="wrapper">
<img src="images/logo/logo_01.png">
<ul>
<li>
<a href="#">KU 스타트업</a>
<!--dropdown menu-->
<div class="sub-menu-whole">
<!--<img src="images/bg/bg_submenu_01.png">-->
<div class="column">
<ul id="sub-list">
<li class="sub-list-item">
<a class="sub-list-title">인사말</a>
</li>
<li class="sub-list-item">
<a class="sub-list-title">창업부서소개</a>
<ul class="sub-sub-list">
<li class="item"><a class="sub-sub-title">크림슨창업지원단</a></li>
<li class="item"><a class="sub-sub-title">기술지주회사</a></li>
<li class="item"><a class="sub-sub-title">스타트업 연구원</a></li>
<li class="item"><a class="sub-sub-title">캠퍼스타운지원센터</a></li>
<li class="item"><a class="sub-sub-title">KU개척마을</a></li>
<li class="item"><a class="sub-sub-title">기술사업부</a></li>
</ul>
</li>
</ul>
</div>
<div class="column">
<ul id="sub-list">
<li class="sub-list-item">
<a class="sub-list-title">창업 비전</a>
</li>
<li class="sub-list-item">
<a class="sub-list-title">찾아오시는 길</a>
</li>
</ul>
</div>
<div class="column">
<ul id="sub-list">
<li class="sub-list-item">
<a class="sub-list-title">창업 프로세스</a>
</li>
</ul>
</div>
</div>
<!--//end of dropdown contents-->
</li>
<li><a href="#">프로그램</a></li>
<li><a href="#">스타트업 리더</a></li>
<li><a href="#">창업보육</a></li>
<li><a href="#">창업멘토단</a></li>
<li><a href="#">커뮤니티</a></li>
</ul>
</div>
</div>
CSS代码：（用于CSS的SASS）
.wrapper { /*wrapper*/
width: 1024px;
margin: 0 auto;
}
#lower-header {
background-color: #ffffff;
height: 100px;
position: relative;
width: -webkit-fill-available;
z-index: 1;
img {
float: left;
margin-top: 33px;
}
ul {
list-style: none;
display: block;
float: left;
margin: 17px 0px;
padding-left: 30px;
li {
display: inline-block;
font-size: 17px;
font-weight: bold;
padding: 16px 19px;
height: 73px;
.sub-menu-whole {
background-color: #ffffff;
height: 360px;
position: absolute;
z-index: 1;
width: 100%;
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #760023;
&:after {
content: "";
display: table;
clear: both;
}
img {
margin:0;
}
.column {
float: left;
width: 33.33%;
border: 1px solid red;
margin: 0;
#sub-list { /*sub-list*/
.sub-list-item { /*sub-list-item*/
background-color: #f3efed;
height: auto;
padding: 8px 10px 8px 10px;
border: 1px solid #ede8e6;
display: block;
margin: 22px 0;
width: 213px;
&:hover {
background-color: #414141;
border-color: #3b3b3b;
a {
color: #ffffff;
}
.sub-sub-title { color: black; }
}
.sub-list-title {
color: #766955;
font-size: 15px;
}
.sub-sub-list {
list-style: none;
display:block;
padding: 0;
.item {
display: block;
/* margin: 0; */
padding: 3px;
height: auto;
&:before {
content: "-";
color: #e2d5d3;
margin-right: 8px;
margin-left: -12px;
}
a {
font-size: 13px;
color: #535353;
}
}
}
} /*END OF SUBLIST ITEM*/
} /*end of sublist*/
} /*end of column*/
} /*end of sub-menu-whole*/
a {
text-decoration: none;
color: #000000;
&:hover {
color: red;
}
}
} /*end of list*/
} /*end of UL*/
} /*end of lower header*/
我希望我的下拉菜单扩展到全角，然后发生的事情是下拉菜单是全角，但是位置不在页面的另一边。
答案 0 :(得分：1)
根据我的评估
提供width: 100vw;，不要忘记与position: absolute;一起left: 0;
这样可以解决您的问题。
更新：我刚刚再次检查了代码display: inline-block;，而width: 100%;也可能有效，但是您仍然需要将其放置在left: 0;