Question

我之前看过这个问题，但没有一个有效的答案。我想要一些绝对定位的div扩展到整页长度的100％，并且还有一个粘性页脚。

当窗口高度小于内容的高度时，这非常有效，除了 - 即需要垂直滚动。当需要垂直滚动时，绝对定位的div（以及它们的父母）是可见区域的100％，而不是整页长度。这导致出现差距。

我可以通过删除

来消除差距

html, body {
height:100%;
}

从代码

，但当然页脚不在页面的底部。

您可以在此处看到一个缩减示例：https://jsfiddle.net/rickibarnes/8ra4djdw/

任何人都可以肯定地告诉我，这是不可能的吗？

请注意我使div绝对定位的原因是将它们从文档流中取出。因此.copy div覆盖它们。如果有人能够想出一种不同的方式来做到这一点，这将使高度发挥作用，我也会很高兴听到它。这是我试图做到的第三种不同的方式，但仍然没有骰子。

Answer 1

更新了小提琴 - https://jsfiddle.net/afelixj/8ra4djdw/2/

.copy和.main的编辑样式。

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 2

好的，所以我按照自己的意愿行事，并且我发布了我曾经使用的解决方案，以防万一。它再次使用position：absolute，但这次是为了实际定位。我觉得很脏：O

.pure-container进入min-height，页脚是绝对定位的，主要内容的整体父.sections添加了页脚高度的填充底部，因此页脚从不重叠。

更新了小提琴：https://jsfiddle.net/rickibarnes/rrd8f11o/

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

footer {
    height:20px;
    position:absolute;
    bottom:0px;
    left:0px;
}

.sections {
    padding:0 0 20px 0;
}

100％高度绝对定位div与粘性页脚

2 个答案: