在頁面的頁腳前定位div

Question

附加頁面佈局以更好地解釋我的需求。

1. 將文本放在頁腳部分之前。
2. 有些時候頁腳可能不可見（可能需要滾動），在這種情況下，將文本帶到可見區域的底部。

我已經嘗試了很多方法來實現這一點。 任何解決此問題的指針都會有所幫助。

感謝， Santhosh

Answer 1

您可以使用Flexbox，就達到這個

body { 
 
    margin: 0; 
 
    
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
} 
 

 
.content { 
 
    /* occupy all height */ 
 
    flex: 1 0 auto; 
 
    /* nested flex container */ 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.bottom-text { 
 
    /* Move to the bottom */ 
 
    /* This works because this is flex item */ 
 
    margin-top: auto; 
 
} 
 

 
/* styles just for demo */ 
 
body { 
 
    text-align: center; 
 
} 
 

 
header { 
 
    background-color: tomato; 
 
} 
 

 
.content { 
 
    background-color: lightsteelblue; 
 
} 
 

 
.bottom-text { 
 
    background-color: moccasin; 
 
} 
 

 
footer { 
 
    background-color: lime; 
 
}

<header>Page header</header> 
 
<section class="content"> 
 
    Page content 
 
    <div class="bottom-text">Place a text just before footer</div> 
 
</section> 
 
<footer>Page footer</footer>

有關顯示bottom-text時footer是不可見的，我們將使用JavaScript：

// Checks if element is visible on screen 
 
function checkVisible(element) { 
 
    var rect = element.getBoundingClientRect(); 
 
    var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight); 
 
    return !(rect.bottom < 0 || rect.top - viewHeight >= 0); 
 
} 
 

 
var footer = document.querySelector("footer"); 
 
var bottomText = document.querySelector(".bottom-text"); 
 
var bottomTextFixedClassName = "bottom-text--fixed"; 
 

 
// Sets element position as fixed 
 
// when footer is not visible on screen 
 
function setFixedButtonText() { 
 
    if (checkVisible(footer)) 
 
    bottomText.classList.remove(bottomTextFixedClassName); 
 
    else 
 
    bottomText.classList.add(bottomTextFixedClassName); 
 
} 
 

 
window.addEventListener("scroll", setFixedButtonText); 
 

 
setFixedButtonText();

body { 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
} 
 

 
.content { 
 
    /* occupy all height by flex-grow: 1 */ 
 
    /* Don't shrink using flex-shrink: 0 */ 
 
    /* Setting flex-basis to 1500px to emulate long content */ 
 
    /* Replace 1500px with auto in production code */ 
 
    flex: 1 0 1500px; 
 
    /* nested flex container */ 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.bottom-text { 
 
    /* Move to the bottom */ 
 
    /* This works because this is flex item */ 
 
    margin-top: auto; 
 
} 
 

 
.bottom-text--fixed { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
/* styles just for demo */ 
 
body { 
 
    text-align: center; 
 
} 
 

 
header { 
 
    background-color: tomato; 
 
} 
 

 
.content { 
 
    background-color: lightsteelblue; 
 
} 
 

 
.bottom-text { 
 
    background-color: moccasin; 
 
} 
 

 
footer { 
 
    background-color: lime; 
 
}

<header>Page header</header> 
 
<section class="content"> 
 
    Page content 
 
    <div class="bottom-text">Place a text just before footer</div> 
 
</section> 
 
<footer>Page footer</footer>

如果您需要IE suppost你可以用變化來min-height: 100vh;height: 100vh;。這是IE的min-height錯誤與flex-direction: column;彎曲的解決方法。