具有固定位置和宽度的响应式 Web 导航问题
Posted
技术标签:
【中文标题】具有固定位置和宽度的响应式 Web 导航问题【英文标题】：responsive web navigation problem with position fixed and width 【发布时间】：2020-12-15 01:14:29 【问题描述】：我遇到的问题是我添加的带有图片的平板电脑导航应该覆盖整个页面。因为我给了它固定位置 width : 100%, height : 100% 。但不知何故，正如您所见，存在差距。 我不知道我错过了哪里:(.....
差距1
gap2（在我给它之后：-50px）
这里是 HTML
<body>
<header>
<div class="side_nav">
</div>
<div class="header_con">
<span><a href="#"></a></span>
<p><a href="#"><img src="images/logo.png" ></a></p>
<nav>
<ul class="depth1">
<li><a href="#">코로나-19</a>
<ul class="depth2">
<li><a href="#">손세정제</a></li>
<li><a href="#">소독제</a></li>
</ul>
</li>
<li><a href="#">컬렉션</a>
<ul class="depth2">
<li><a href="#"><small>new</small>클레멘타인 앤 바질</a></li>
<li><a href="#"><small>new</small>베티버 앤 바이올렛</a></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>
<li><a href="#">배스타임</a></li>
<li><a href="#">선물세트/ 기프트세트</a></li>
</ul>
</li>
<li><a href="#">오일</a>
<ul class="depth2">
<li><a href="#">페이셜오일</a></li>
<li><a href="#">멀티오일</a></li>
</ul>
</li>
.
.
.
</ul>
</nav>
</div>
</header>
普通 CSS
header .header_con width: 100%; height: 100%; position: relative; height: 174px;
header .header_con p img width: 350px; height: auto;
header .header_con>divwidth: 100%;
header nav width: 750px;/* margin:0 auto;*/ position: absolute; left: 50%; margin-left: -360px;
header ul.depth1>lifloat: left; width: 70px; margin: 0 0.2%; font-size: 0.9em; font-weight: bold; text-align: center;
header ul.depth2display: none; position: absolute; z-index: 100; width: 200px; margin-top: 20px; background: #fff; text-align: left; padding: 20px; font-weight: normal; font-size: 0.8em;
header ul.depth2>li margin-bottom: 12px;
这是（最大宽度：1050px）CSS
@media all and (max-width: 1050px)
header div.header_con nav /* display: none;*/ position: fixed; top:0; left: -50px; width: 100%; height: 100%; background: #0b223b; border:1px solid red; z-index: 110;
header div.header_con nav a color: white;
header div.header_con nav .depth1display: block; color: white; height: 100%;
header div.header_con nav .depth1 li float: none ;width: 100%; height: 50px; line-height: 50px; border-bottom: 1px solid #999;
header div.header_con spanposition: absolute; top: 50%; margin-top: -13px; left: 30px; z-index:100; width: 30px; height: 25px; background: url(../images/navbar.png) no-repeat; background-size: 30px 25px;
header div.header_con span awidth: 30px; height: 25px;
【问题讨论】：
【参考方案1】：您是否尝试在导航上设置top: 0; right: 0; bottom: 0; left: 0; 而不是宽度和高度？
【讨论】：
天啊！我给了它位置：固定；顶部：0；右：0；底部：0；宽度：100%；高度：100%； ，没有离开：0，它的工作！但我不知道为什么......！无论如何，非常感谢！ :)以上是关于具有固定位置和宽度的响应式 Web 导航问题的主要内容，如果未能解决你的问题，请参考以下文章