位置固定和宽度的响应式网络导航问题

Question

我遇到问题，我添加的带有图片的平板电脑导航应该覆盖整个页面。因为我给了它固定位置 width : 100%, height : 100% 。但不知何故，如您所见，存在差距。我不知道我错过了哪里:( .....

gap1

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

}

Answer 1

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

位置固定和宽度的响应式网络导航问题

responsive web navigation problem with position fixed and width

css

navigation

fixed

width

responsive-design