html - 100% 高度绝对定位的 div，带有粘性页脚

Question

我以前见过这个问题，但没有有效的答案。我想要几个绝对定位的 div 以扩展到整个页面长度的 100%，还有一个粘性页脚。

这非常有效，除了当窗口高度小于内容的高度时 - 即需要垂直滚动。当需要垂直滚动时，绝对定位的 div(以及它们的父级)是可见区域的 100%，而不是整个页面长度。这会导致出现间隙。

我可以通过删除

来消除差距

html, body {
height:100%;
}

来自代码，但页脚当然不在页面底部。

你可以在这里看到一个简化的例子:https://jsfiddle.net/rickibarnes/8ra4djdw/

谁能明确地告诉我，这是不可能的吗？

请注意，我将 div 设置为绝对定位的原因是为了将它们从文档流中移除。因此使 .copy div 覆盖它们。如果有人能想出一种不同的方法来实现高度，我也会很高兴听到它。这是我尝试这样做的第三种不同方式，但仍然没有成功。

Answer 1

更新 fiddle - https://jsfiddle.net/afelixj/8ra4djdw/2/

.copy 和 .main 的编辑样式。

html {
min-height:100%;
}

html, body {
height:100%;
}

body {
width:100%;
height:100%;
margin:0;
overflow-x:hidden;
}

* {
box-sizing:border-box;
}

.pure-container {
position:relative;
height:100%;
}

#preheader {
height:37px;
background-color:#CCC;
}

header {
width:20%;
height:calc(100% - 37px);
margin:0;
padding:20px 0;
background-color:#999;
position:absolute;
}

#main-nav {
margin:100px auto 0 auto;
}

.main {
width:100%;
height:calc(100% - 37px);
margin:0 auto;
display:flex;
flex-wrap:wrap;
align-content:space-between;
}

.sections {
width:100%;
/* display:flex;
flex-wrap:wrap; */
height: calc(100% - 37px);
}

#slider {
  overflow:hidden;
  position:relative;
}

footer {
width:100%;
background-color:rgba(0,0,0,0.28);
z-index:16;
color:#FFF;
}

#slideshow {
width:100%;
height:calc(100% - 37px);
margin:0 0 0 20%;
overflow:hidden;
position:absolute;
top:37px;
left:0;
order:2;
}

#slider {
height:100%;
overflow:hidden;
position:relative;
}

.slideshow {
list-style:none;
z-index:1;
}

.slideshow li span {
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  color:transparent;
  background:url(http://rickibarn.es/images/other/index-01.jpg) 50% 50% no-repeat;
  background-size:cover;
  z-index:0;
}

.copy {
width:75%;
margin:100px 0 0 0;
position:relative;
left:calc(20% - 70px);
border-bottom:1px solid #FFF;
z-index:15;
order:1;

height: calc(100% - 100px);
overflow: auto;
}

.copy h1, .copy p {
max-width:345px;
margin:0;
margin-left:calc(100% - 345px);
padding:25px 30px 10px 30px;
color:#FFF;
background-color:rgba(1, 1, 1, 0.6);
}

<div class="pure-container">
  
<section id="preheader">
  Preheader
</section>

  
<header>
  <nav id="main-nav">
    <ul class="navlist">
      <li>menu</li>
    </ul>
  </nav>
   </header>


<div class="main">

  <div class="sections">
  
  
    <section id="slideshow">
      <div id="slider">
        <ul class="slideshow">
          <li> <span>1/6</span> </li>
        </ul>
      </div>
    </section>
    
    
    <section id="copy" class="copy">
      <h1>Lorem ipsum dolor sit amet</h1>
      
      <div class="copy-para">
      <p>
      Aliquam malesuada turpis vitae hendrerit dapibus. Fusce nec ultricies augue, in pellentesque leo. Quisque aliquam ullamcorper tellus nec iaculis. Phasellus euismod aliquet volutpat. Nullam magna elit, euismod facilisis est eget, tempus semper nisl. 
      </p>
      
      <p>
      Mauris dapibus leo ut sagittis porta. Proin vitae eros sed ex aliquet cursus vel tristique lacus. Nunc ornare, tellus eget dignissim fringilla, mauris nisl vestibulum risus, id porttitor erat ligula sed diam. Duis non est libero. Nam vulputate erat non nulla eleifend.
      </p>
      </div>
    </section>
    
  
  </div>
    
    
    
  <footer>
    Footer
  </footer>
  
    
</div>


  </div>