CSSを使用して背景のフッターストリップを維持する

私たちのデザインチームは、リンク先ページで完全な背景イメージを使用するコンセプトを考え出しましたが、残りのページのフッターにイメージがあります白い背景に。概念を説明するために、最大迅速モックとしてCSSを使用して背景のフッターストリップを維持する

ので、ランディングページは次のようになります。

サイトの大半は以下のようになりますが：

この私たちは明らかにそれが表示されているウィンドウのサイズを知らないので問題があります。そのため、すべてのページで一貫性のあるフッターストリップが維持されます。おそらくページ全体の背景イメージとthほとんどそれを白でブロックする。

私はCSSでこれをするのに苦労しています（私はバックエンドの開発者ですが、これを行うにはロープされています）。私はスティッキーフッターの次のパターン採用：

html{ 
    height: 100%; 
    margin: 0; 
} 

body { 
    background-image: url("iStock-507452790.jpg"); 
    margin: 0; padding: 0; 
    background-size: 100%; 
    height: 100%; 
} 

.wrapper { 
    min-height: 100%; 
    background-color: white; 
    margin-bottom: -50px; 
} 

.footer, .push { 
    height: 50px; 
} 

<body> 
    <div class="wrapper"> 
     content! 
    <div class="push"></div> 
    </div> 
    <footer class="footer"> 
    footer! 
    </footer> 
</body>

をしかし、これは単なるラッパーに指定された背景色で塗りつぶされているページ全体につながります。

ほとんどのページで白くなり、ストリップを一番下に置く方法はありますか？私は、必要に応じて他のスティッキーフッターメソッドを使用することに嫌うことはありません。

出典

2017-07-26 Matt Thrower

を試してみてください、あなたは常に背景画像として表示され、 'footer'をしたいですか？また、あなたのラッパーに 'min-width：100％;'をなぜ持っていますか？それともこの問題を説明するのですか？ – Rubenxfd

@Rubenxfd申し訳ありませんが、私はそれをとてもうまく説明していません。私は、フルページであった場合、ページの下部にある背景画像の同じ部分を常にフッターに表示したいと思います。それは理にかなっていますか？ラッパーには最小幅がありません。最小幅です。 –

ちょうど私はまた、DOMを少し変更しました。この

body, 
 
html { 
 
    height: 100vh; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
    position: relative; 
 
    color: #000; 
 
    font-size: 25px; 
 
} 
 

 
.footer { 
 
    color: #fff; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
    color: #fff; 
 
    background: url('https://dummyimage.com/600x400/000/fff') center 
 
    center no-repeat; 
 
    background-size: cover; 
 
}

<div class="wrapper"> 
 
    content! 
 
    <footer class="footer"> 
 
    footer! 
 
    </footer> 
 
</div>

出典

2017-07-26 09:52:18 LKG

提案していただきありがとうございますが、私はあなたが間違った方法で問題を抱えていると思います。フッターが常に背景画像のそれぞれの部分を表示し、別の色ではないようにしますか？ –

それでは、フッタを位置@ – LKG

のラッパーに置くことができます@Matt Throwerは更新された答えを確認します。 – LKG

してみてください。お役に立てれば。

また、必要がない場合は、フッターテキストを削除することもできます。

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    background-image: url('http://www.lavitaoggi.com/wp-content/uploads/2014/02/8e69oceano-acqua-bolle-aria-ossigeno.jpg'); 
 
} 
 

 
.wrapper { 
 
    min-height: 90vh; 
 
    background-color: white; 
 
} 
 

 
.footer { 
 
    height: 10vh; 
 
    color: #fff; 
 
}

<div class="wrapper"> 
 
    content! loream 
 
</div> 
 
<footer class="footer"> 
 
    footer!s 
 
</footer>

出典

2017-07-26 09:54:37 Aslam

ありがとう - あなたのサンプルはまさに私が後にしているものです。私のページでは、フッタの底ではなく画像の上端を表示しています。これは奇妙です。私は掘るでしょう。 –

html,body{ 
 
    height: 100%; 
 
    width:100%; 
 
    margin: 0; 
 
} 
 
.page{ 
 
    height: 100vh; 
 
    width:100%; 
 
    display:inline-block; 
 
    background-image: url('http://ulatbambu.com/images/google-images-water-background-clipart-35.jpg'); 
 
    margin: 0; 
 
    padding: 0; 
 
    background-size: 100%; 
 
    background-color:blue; 
 
} 
 
.wrapper { 
 
    min-height: 85%; 
 
    background-color: white; 
 
    margin-bottom: -50px; 
 
    width:100%; 
 
} 
 

 
.footer, .push { 
 
     height: 50px; 
 
    background-color: transparent; 
 
    position: absolute; 
 
    display:inline-block; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    z-index: 9999; 
 
    text-align:center; 
 
    padding-top:20%; 
 
}

<body> 
 
<div class="page"> 
 
    <div class="wrapper"> 
 
     content! 
 
    <div class="push"></div> 
 
    </div> 
 
    <footer class="footer"> 
 
    <span>footer!</span> 
 
    </footer> 
 
</div> 
 
</body>

だから、この

出典

2017-07-26 09:58:12 M0ns1f

CSSを使用して背景のフッターストリップを維持する

答えて

関連する問題