在页眉和页脚之间添加一个占据其余视图高度的 div

Question

我正在尝试在页眉和页脚之间添加一个 div。两者都是弹性盒子，但是中间的 div（最终需要是一个滑块）没有很好地定位。我试图让标题位于顶部，滑块填充视图高度的剩余空间。只有在滚动它应该显示页脚（以及最终其他 div 的）。不知怎的，我感觉 flex box 不能正常工作。

效果和本站基本一样：ArsThanea。

我在打开 JSFiddle 时遇到的另一个问题是页眉和页脚没有占据视图框的完整宽度，尽管 div 确实如此。当使用 Gulp / Jekyll 在浏览器中运行 html 和 css 时，它可以工作并且占据整个宽度。

header {
  height: 130px;
  background: white;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
}
header .logo img {
  height: 73px;
  width: 146px;
  padding-left: 60px;
}
header p {
  text-transform: uppercase;
  font-family: 'StratumNo1';
  font-size: 14px;
  margin: 0;
  padding-left: 50px;
}
header .site-nav {
  margin-left: auto;
}
header .site-nav ul {
  list-style: none;
  margin: 0;
}
header .site-nav ul li {
  display: inline;
  font-family: 'StratumNo1';
  color: black;
  margin: 10px;
  text-transform: uppercase;
  font-size: 14px;
}
header .site-nav ul li a {
  text-decoration: none;
  color: black;
}
header .site-nav ul li a:hover {
  text-decoration: underline;
}
header .site-nav ul li a:first-child {
  margin: 0px 10px 0 0;
}
header .search-form {
  width: 300px;
  height: 20px;
  margin-left: 10px;
}
header .search-form .search-input {
  width: 240px;
  border-bottom: black 1px solid;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font-family: 'StratumNo1';
  font-size: 14px;
}
header .search-form .search-input:focus {
  outline: 0;
}
.footer-lockup {
  height: 100px;
  background-color: #1d1c1c;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}
.footer-lockup .copyright {
  margin: 0;
  color: white;
  font-size: 14px;
  font-family: 'Open Sans Light';
  margin-left: 60px;
  color: #4d4c4c;
  width: auto;
}
.footer-lockup ul {
  list-style: none;
  margin-right: 60px;
  padding: 0;
}
.footer-lockup ul li {
  display: inline;
  font-family: 'Open Sans Light';
  font-size: 14px;
  margin: 10px;
  text-transform: uppercase;
}
.footer-lockup ul li:last-child {
  margin-right: 0px;
}
.footer-lockup ul li a {
  text-decoration: none;
  color: #4d4c4c;
}
.social-logos {
  position: relative;
  min-width: 200px;
  display: -ms-flexbox;
  display: flex;
}
.social-logos .social-logo {
  height: 20px;
  min-width: 20px;
  margin-right: 18px;
}
.social-logos .social-logo:last-child {
  margin-right: 0;
}
.social-logos .social-logo .social-media {
  text-align: center;
  height: 20px;
  cursor: pointer;
}
.social-logos .social-logo img {
  height: 20px;
}
.social-logos .social-logo img.youtube {
  height: 35px;
  margin-top: -7px;
}
.projects-wrapper {
  display: block;
  background: pink;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 130px;
}

<header>
  <div class="logo">
    <img src="/assets/img/YourLogo.svg" />
  </div>
  <p>Your Placeholder Text</p>
  <nav class="site-nav">
    <ul>
      <li><a href="#Home">Home</a>
      </li>
      <li><a href="#About Us">About Us</a>
      </li>
      <li><a href="#Services">Services</a>
      </li>
      <li><a href="#Work">Work</a>
      </li>
      <li><a href="#Contact">Contact</a>
      </li>
    </ul>
  </nav>
  <form class="search-form">
    <input placeholder="What are you looking for?" type="search" name="search-input" class="search-input" />
  </form>
</header>

<div class="projects-wrapper"></div>


<footer>
  <div class="footer-lockup">
    <p class="copyright">© 2016 “Your Company Name” All rights reserved</p>

    <div class="social-logos">
      <div class="social-logo">
        <div class="social-media">
          <img src="/assets/img/behance-icon.svg" />
        </div>
      </div>

      <div class="social-logo">
        <div class="social-media">
          <img src="/assets/img/facebook-icon.svg" />
        </div>
      </div>

      <div class="social-logo">
        <div class="social-media">
          <img src="/assets/img/linkedin-icon.svg" />
        </div>
      </div>

      <div class="social-logo">
        <div class="social-media">
          <img src="/assets/img/twitter-icon.svg" />
        </div>
      </div>

      <div class="social-logo">
        <div class="social-media">
          <img src="/assets/img/youtube-icon.svg" class="youtube" />
        </div>
      </div>
    </div>

    <ul>
      <li><a href="#Home">Home</a>
      </li>
      <li><a href="#About Us">About Us</a>
      </li>
      <li><a href="#Services">Services</a>
      </li>
      <li><a href="#Work">Work</a>
      </li>
      <li><a href="#Contact">Contact</a>
      </li>
    </ul>
</footer>

演示：JSFiddle

Answer 1

看看您的 Fiddle，您可以对标记和 CSS 进行许多改进，但首先要解决您的问题，它没有按预期下滑的原因是：

position: absolute

你将它添加到你的主 div 中，它应该在 .projects-wrapper 之间。我要说的第一件事就是让它成为一个 flex 而不是块元素。

其次，为您的整个项目主体添加一个包装器并使其具有弹性。像这样

<div class="wrapper"> //this should be flex
  <header>..</header> //this "could" be flex depending on its contents
  <div class="projects-wrapper"></div>
  <footer>...</footer> //this "could" be flex depending on its contents
</div>

如果您遇到任何其他问题，请告诉我

Answer 2

我为你写了代码，请看一下，告诉我它对你有好处。

fiddle

我使用calc() 来做到这一点

Answer 3

使用 100vh 获得 100% 的视口高度并减去页眉和页脚的高度。

min-height: calc(100vh - 50px); 

其中 50px 是页眉+页脚的高度。 部分支持ie