マイページのフッタの直前にdivを配置する

Question

私の要件をよりよく説明するページレイアウトを添付してください。

1. フッターセクションの直前にテキストを配置します。
2. フッターが表示されない場合があります（スクロールが必要な場合があります）。その場合は、テキストを表示領域の下に移動します。

私はこれを達成するために多くの方法を試しました。 この問題を解決するためのあらゆる指針が役立ちます。

おかげで、 Santhosh

Answer 1

footerは、我々が使用しますJavascriptの表示されていないときは、bottom-textを示すために、この

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>

を達成するためにフレキシボックスを使用することができます。

// 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が必要な場合は、height: 100vh;に変更min-height: 100vh;を使用することができますsuppost。これはflex-direction: column;でflexのバグのIEのmin-heightバグの回避策です。