具有固定位置和宽度的响应式 Web 导航问题答案

【问题标题】：responsive web navigation problem with position fixed and width具有固定位置和宽度的响应式 Web 导航问题
【发布时间】：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" alt="logo"></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>div{width: 100%;}
header nav { width: 750px;/* margin:0 auto;*/ position: absolute; left: 50%; margin-left: -360px;}
header ul.depth1>li{float: left; width: 70px; margin: 0 0.2%; font-size: 0.9em; font-weight: bold; text-align: center;}
header ul.depth2{display: 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 .depth1{display: 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 span{position: 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 a{width: 30px; height: 25px;}

}

【问题讨论】：

标签： css responsive-design navigation width fixed

【解决方案1】：

您是否尝试在导航上设置top: 0; right: 0; bottom: 0; left: 0; 而不是宽度和高度？

【讨论】：

天啊！我给了它{位置：固定；顶部：0；右：0；底部：0；宽度：100%；高度：100%； }，没有离开：0，它的工作！但我不知道为什么......！无论如何，非常感谢！ :)