добавление div в раздел заголовка создает в браузере странное призрачное пространство и полосы прокрутки - PullRequest
Новая
       7

добавление div в раздел заголовка создает в браузере странное призрачное пространство и полосы прокрутки

0 голосов
/ 03 сентября 2018

всякий раз, когда я добавляю контент в раздел заголовка, появляется странное призрачное пространство и полосы прокрутки появляются в окне браузера.

как мне от этого избавиться?

Я пытался изменить ширину div.hours, но, похоже, ничего не работает.

спасибо

HTML: 

<body>
<header>
    <nav class="navigation">
        <ul>
            <li><a href="">HOURS</a></li>
            <li><a href="">MENU</a></li>
            <li><a href="">CONTACT</a></li>
            <li><a href=""><i class="fab fa-facebook-f"></i></a></li>
            <li><a href=""><i class="fab fa-instagram"></i></a></li>

        </ul>
    </nav>  
    <div class="image-container">
        <img src="imgs/sophies-white.png" alt="">
    </div>  
</header>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
</script>

CSS 

/*  HEADER STYLING */

header {
    background-image: url(imgs/sophiesbg1.png);
    background-size: cover;
    width: 100vw;
    height: 100vh;
}

nav {
    background-color: #fce0e6;
    position: absolute;
    width: 100vw;
    margin-top: calc(100vh - 58px)
 }

nav ul {
    display: flex;
    justify-content: flex-end;
    color: white;
    font-family: helvetica;
}


nav ul li {
    padding: 20px 15px;
}

header img {
    display: block;
    width: 800px;
    margin-left: 15%;
}

Теперь, например, если я добавлю: 

<div class="hours">
    <h1>hours</h1>
</div>

под заголовком в теле появляется пространство-призрак.

перед: до

после: после

Ответы [ 3 ]

0 голосов
/ 03 сентября 2018

Чтобы избавиться от вертикальной полосы прокрутки, рассчитайте высоту изображения: 

header img {
  display: block;
  width: 800px;
  height: calc(100vh - 100px);
  margin-left: 15%;
}

и настройте поле наверху раздела навигации: 

nav {
  background-color: #fce0e6;
  position: absolute;
  width: 100%;
  margin-top: calc(100vh - 100px);
}

и, избавьтесь от следующего в заголовке css: 

height: 100vh;

Возможно, вам придется продолжать играть со значением «100px», чтобы получить именно то, что вы хотите.

Мне удалось избавиться от горизонтальной полосы прокрутки, добавив margin: 0 к стилю тела и избавившись от ширины: 100vw из заголовка css.

0 голосов
/ 03 сентября 2018

Горизонтальная полоса прокрутки появляется, потому что вы используете width: 100vw; в навигации и заголовке. Замените его на 100%, потому что в противном случае, когда появляется вертикальная полоса прокрутки, она больше не помещается.

Для навигации вы предполагаете, что она всегда равна 58px, но это может варьироваться в зависимости от браузера. Предлагаю сделать заголовок position: relative; и навигацию внутри position: absolute; и bottom: 0;

https://jsfiddle.net/v015rtmd/5/

0 голосов
/ 03 сентября 2018

Добавление к переполнению тела: скрыто; может быть, может помочь вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...