100％身高絕對定位與粘腳foote

Question

我以前見過這個問題，但沒有與有效的答案。我想要一些絕對定位的div來擴展到整頁長度的100％，並且也是一個粘性頁腳。

當窗口高度小於內容的高度 - 即需要垂直滾動時，此功能非常完美，除外。當需要垂直滾動時，絕對定位的div（以及它們的父母）是可見區域的100％，而不是整個頁面的長度。這導致差距顯示。

我可以從代碼去除

html, body { 
height:100%; 
} 

擺脫的差距，但是那當然頁腳是不是在頁面的底部。

這裏你可以看到一個砍下例如：https://jsfiddle.net/rickibarnes/8ra4djdw/

誰能告訴我明確，這只是不可能？

請注意我使div完全定位的原因是將它們帶出文檔流程。並因此使.copy div覆蓋它們。如果任何人都可以想到一種不同的方式來讓高度工作，我也會很高興聽到它。這是我試圖做到這一點的第三種不同方式，並且仍然沒有骰子。

Answer 1

好吧，所以我找到了工作，我怎麼想，和我張貼我的情況下使用的解決方案這是任何幫助。它再次使用位置：絕對值，但是對於這次的實際定位。我覺得很骯髒：O

.pure-container轉爲最小高度，頁腳絕對定位，並且主內容的整體父節點.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; 
} 

Answer 2

更新小提琴 - 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>