Блог

Главная - Вопросы по программированию - проблема с адаптивной веб-навигацией с фиксированной позицией и шириной

проблема с адаптивной веб-навигацией с фиксированной позицией и шириной

#css #responsive-design #navigation #width #fixed

#css #адаптивный дизайн #навигация #ширина #исправлено

Вопрос:

У меня проблема с тем, что навигация для планшетного ПК с добавляемым изображением должна охватывать всю страницу. Потому что я дал ему фиксированную ширину позиции: 100%, высоту: 100%. Но, как вы можете видеть, почему-то есть пробел. Я не знаю, где я пропустил 🙁 …..

пробел1

введите описание изображения здесь

пробел2 (после того, как я оставил его: — 50 пикселей)

введите описание изображения здесь

вот 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;}

и вот (максимальная ширина: 1050 пикселей) 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;}

}

Ответ №1:

Вы пробовали устанавливать top: 0; right: 0; bottom: 0; left: 0; на навигаторе вместо ширины и высоты?

Комментарии:

1. БОЖЕ! Я дал ему { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; }, а не left: 0, это работает! но я не знаю, почему ….! в любом случае, большое спасибо! 🙂