Question

请访问我的网站http://amrapps.ir/personal/indexbug.html

直观地看到我的问题。

让我解释一下我的问题：

在我的网站上，我有一个固定的postion div，其中包含链接，我需要 ，它需要25％的浏览器高度。

然后是红色div，占浏览器宽度的75％。

当用户点击红色div中的 -CLICK THERE TO READ MORE - 时，它将被重定向到下一个（黄色）div，它占用浏览器高度的100％。

然后你可以点击上面固定div上的转到顶部以返回红色div。

导航工作正常，但存在问题。

当您在第二个（黄色）div时，如果您更改浏览器宽度，红色div也将可见！我该如何解决这个问题？

谢谢你的努力。

Answer 1

将您的#aboutmore课程更改为以下css：

#aboutmore {
    background-color: #FFCE85;
    margin-top: 5px;
    top: 25%;
    position: absolute;
    /* height: 74%; */
    width: 100%;
    min-width: 1130px;
    bottom: 0px;
    z-index: 3;
}

Answer 2

这里有几件事情，我不是100％想要完成的结果，但我们正在使用CSS高度，所以你需要记住一些事情。

第一：使用css高度时，需要确保所有包装元素的高度均为100％。包括你的身体和HTML标签。如果没有这个，你的身体将只有其中的元素的高度，你的100％div将做到。

其次，你应该转动身体'overflow：hidden'属性，因为它只是阻碍了正确的测试。

现在，就像我说的那样，我不确定你要完成什么，但是你的标题应该从包装中取出，因为它已经修复了。这将允许您的包装器成为可滚动区域。你还提到你想要第二个div为100％高度，第一个div为75％。现在，在位置固定的情况下，这意味着您的黄色div只有75％可见，25％隐藏（通过屏幕外或标题下）。如果您希望第一个div和标题一起占用100％，并且任何后续div自己占用100％，则应将所有元素定位为相对而不是固定。

我将在这里添加一些代码来帮助修复标题：

div#page-wrap {
height: 75%;
position: absolute;
top: 25%;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}

about,
#aboutmore {
height: 100%;
position: relative;
top: 0%;
}

现在这将打破你的javascript（因为你实际上无法滚动身体），虽然我无论如何都无法让它在第一时间工作。您将在此主题中找到有关在div内部滚动的更多信息（现在您需要在您的包装元素中滚动）：How do I scroll to an element within an overflowed Div?

如何设置div的高度以填充浏览器高度？

2 个答案: