Question

我正在尝试实现此site所示的示例。点击＆＃34; Projects＆＃34;主菜单右下角的按钮显示我有兴趣复制的容器。

当从左到右和从上到下拉伸网页时，弹出的项目会响应，并且页面周围的填充保持相同的值。我能够让我的宽度响应，但无法弄清楚如何为我的高度得到相同的东西，因为我没有特定的高度值。我希望我的网站中的框能够在比我现在使用的更大的计算机屏幕上响应（15＆＃34; macbook pro），因为现在它只占用大屏幕上一半的屏幕。

这是我的代码：

nav {
  /* max-width: 1266px; */
  width: 87.92%;
  margin: 50px auto 23px auto;
  height: 40px;
  background-color: pink;
}

.content {
  /* width: 1266px; */
  width: 87.92%;
  height: 540px;
  margin: 0px auto 0px auto;
  background-color: aquamarine;
}

<nav>

</nav>

<div class="content">

</div>

尝试here。

我希望网页的顶部和底部有50px填充，即使您将页面从上到下缩小。现在我的导航有50px的边距顶部，但理想情况下，我希望整个页面的顶部和底部都有50px的填充。我只是不知道该怎么做，我似乎无法在任何地方找到答案！

谢谢！

Answer 1

您可以使用calc（）：

height: calc(100vh - 163px);

100vh =屏幕总高度

163px = 113px + 50px

（113px是带边距的导航高度，50px是到页面底部的距离）

Answer 2

有几种方法可以做。一种方法是使用固定或绝对定位。页面http://kokopako.fr/profile修正了该位置。请注意，当“项目”菜单打开时，该页面中的body不再滚动。这是您使用JavaScript启用的功能。

所以，想象一下，body最初很高，只有导航在顶部可见：

body {
  height: 1900px;
}

nav {
    height: 40px;
    background-color: pink;
    width: 87.92%;
    margin: 50px auto 23px auto;
}

.content {
    background-color: aquamarine;
    display: none;
}

然后当您点击否＆＃34; Projects＆＃34;按钮，您可以添加一个额外的课程，向projects_visible说body，这样它就不会滚动。

.projects_visible {
    overflow: hidden;
}

然后导航和内容将自动以固定位置显示。

.projects_visible nav {
    position: absolute;
    top: 50px;
    right: 50px;
    left: 50px;
    margin: 0;
}

.projects_visible .content {
    display: block;
    position: absolute;
    bottom: 50px;
    top: 123px;
    right: 50px;
    left: 50px;
}

响应高度与页面上的填充

2 个答案: