最小页面高度是视口高度

Question

我认为这是一个简单的问题，但我很困惑如何做到这一点。

在代码段header中应该有130px高度和footer 20px高度。我需要在min-width中添加一些#landing-page-container，因为我需要至少在当前视图的底部设置我的页脚（当然，如果我们的#landing-page-container会更高，则无法看到在开始）。

我有一些代码：

.container{
  position: absolute;
  min-height: 100vh;
  min-width: 100%;
}
#header-container{
  position: relative;
  height: 130px;
  background-color: red;
}
#landing-page-container{
  position: relative;
  height: 100%;
  background-color: blue;
}

#footer-container{
  position: relative;
  height: 40px;
  background-color: green;
}

<div class="container">
  <header id="header-container">
    Here is some navbar
  </header>
  <section id="landing-page-container">
    Here is some content
  </section>
  <footer id="footer-container">
    Here is footer
  </footer>
</div>

我对CSS中的所有位置和显示属性感到有些困惑。

Answer 1

您好

如果您知道页脚中页眉的高度，则可以计算最小内容高度。请查看下面的代码段，修改代码。在这种情况下，您甚至不需要容器的最小高度和宽度。

#header-container {
  height: 130px;
  background-color: red;
}
#landing-page-container {
  /*
  We need to calculate content min height.
  It is whole viewport y axis - height of header and footer.
  */
  min-height: calc(100vh - 130px - 20px);
  background-color: blue;
}
#footer-container {
  height: 20px;
  background-color: green;
}

/* For sample purposes.*/
body {
  margin: 0;
}

<div class="container">
  <header id="header-container">
    Here is some navbar
  </header>
  <section id="landing-page-container">
    Here is some content
  </section>
  <footer id="footer-container">
    Here is footer
  </footer>
</div>

希望有所帮助。

干杯

Answer 2

您可以使用from pyspark.sql.functions import to_json, struct df.select(to_json(struct(struct([df[x] for x in df.columns]))).alias("jsonobject") 并将position: fixed添加到所有元素来解决此问题：

＆＃13;

＆＃13;

width: 100%

＆＃13;

.container {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  margin: -7.51px;
}

#header-container {
  position: fixed;
  height: 130px;
  width: 100%;
  background-color: red;
}

#landing-page-container {
  position: fixed;
  top: 130px;
  height: 100%;
  width: 100%;
  background-color: blue;
}

#footer-container {
  position: fixed;
  top: calc(100% - 40px);
  height: 40px;
  width: 100%;
  background-color: green;
}

＆＃13;

＆＃13;

＆＃13;

https://codepen.io/anon/pen/YawNjr