css 为什么降低屏幕高度会隐藏导航栏后面屏幕顶部的内容？

vfhzx4xs 于 2023-03-05 发布在其他

关注(0)|答案(3)|浏览(179)

我有一个非常简单的投资组合页面。字面上只是一个html文件，一个包含图片的目录，和一个CSS文件。
我的CSS样式有一个问题。当我调整网页宽度时，所有内容都会相应调整，看起来很棒。但是，当屏幕高度太小时，所有内容都会隐藏在屏幕顶部的导航栏后面：

如果您查看用于上下导航网页的浏览器垂直滚动条，我会一直滚动到顶部，但我的网页/html框架底部的内容显示在我的导航条正下方：

你可以把我的导航栏想象成一个部分，然后把关于我的部分想象成一个单独的部分，因为这就是它们在html中的样子。
导航栏部分：

.nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--main-red);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 10;
}

欢迎/关于我部分：

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #000;
  background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}

css

来源：https://stackoverflow.com/questions/75599463/why-is-lowering-my-screen-height-hiding-content-at-the-top-of-the-screen-behind

3条答案

按热度按时间

pieyvz9o1#

你的height: 100vh;把它搞砸了。你可以试着在你的导航和部分之间分配vh，如下所示：

.nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 20vh;
  background: var(--main-red);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80vh;
  background-color: #000;
  background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}

赞(0）回复(0）举报 2023-03-05

brccelvz2#

发生这种情况是因为您使用的高度与100 VH，这意味着它将占用整个屏幕，包括导航栏后面的空间。
一种解决方案是改变这种情况

height: 100vh; to this  height: calc(100vh - 60px);

这段代码减去了导航栏的高度，我假设导航栏的高度是60像素，您可以修改为实际真实的高度，最后，.welcome-section代码如下所示

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 60px); /* Subtract the height of the navigation bar */
  background-color: #000;
  background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}

赞(0）回复(0）举报 2023-03-05

iaqfqrcu3#

所以，感谢所有的帮助，在确定视图高度是问题的根源...@所有...虽然解决方案不是从计算视图高度，或部分视图高度...我所做的只是删除CSS代码，指定视图高度，它看起来很好。
谢谢大家!

赞(0）回复(0）举报 2023-03-05