Question

每当我在标题部分下方添加内容时，就会出现怪异的幽灵空间，并且滚动条会出现在浏览器窗口中。

我该如何摆脱呢？

我尝试更改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>

主体标题下方出现了幽灵空间。

之前：before

之后：after

Answer 1

出现水平滚动条是因为您在导航和标题中使用了width: 100vw;。将其替换为100%，因为否则，当出现垂直滚动条时，它不再适合。

对于导航，您假定它始终为58px高，但这在每个浏览器上可能会有所不同。建议您制作标题position: relative;并在position: absolute;和bottom: 0中进行导航；

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

Answer 2

要摆脱垂直滚动条，请计算图像的高度：

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并从标题css中消除width：100vw，我能够摆脱水平滚动条。

Answer 3

增加身体溢出：隐藏；也许可以帮助您。

在标题部分下添加div会在浏览器上创建怪异的幽灵空间和滚动条

3 个答案: