2017-11-01 7 views
-2

私のCSSにコードを追加しました。コンテンツがページ上にあるとき、私の背景が伸びを止めるでしょう。しかし、今では私のコンテンツは途切れていて、フッタがページの最下部にとどまっていないので、私はそれを考えています。ページが少し遅く読み込まれると表示されますが、コンテンツが読み込まれるともうフッターは表示されません。また、高さを変えずにスクロールすることもできません。私はプラグインを試して、他のポストで提案された追加のコードです。誰も助けなかった。背景が伸びないようにコードを維持しながら、フッターを最下部に置く方法はありますか? editストレッチを止めたコードを残して申し訳ありません。それは以下で見ることができます。また、何が起こっているかの例は、コンテンツがカットオフ/フッターが下部に残りません

#primary 
{ 
position: absolute; 
left: 0; 
height: 100%; 
background-size: cover; 
background-attachment: fixed; 
} 

This is a screenshot of the original issue.here.を見ることができます。私のコンテンツ(プレーヤー)は完全に見ることができますが、背景は伸びています。 position: absolute;を追加することで、正しく読み込むための背景が得られましたが、今度はコンテンツが途切れてしまいます。結果のスクリーンショットはhere for my mobile deviceHere for my desktop.のように表示されます。ご覧のとおり、プレイヤーはモバイルで切断され、両方にフッターが表示されません。最初はフッターが読み込まれていると思った。 topの値を変更すると、コンテンツの背後にあるように見えるフッターが表示されます。私はそれをtop: 370に変更し、this for on my mobileand this on my desktop.を得ました。フッタのソーシャルアイコンはそこにありますが、コンテンツの背後にある読み込み、ページの真ん中です。それが私のコンテンツがカットされている理由です。

+0

シェアコードスニペット? – C2486

+0

ここで私はストレッチを停止する背景を取得するために使用された残念です。#primary { 位置:絶対; 左:0; 高さ:100%; background-size:cover; background-attachment:fixed; } –

答えて

0

トラブルシューティングとウェブ検索の数日後、問題の解決方法が見つかりました。ページの一番下にフッターを配置するコードを追加しました。コードは、すべてのコンテンツの一番下にではなく、フッターを貼り付けたままにしました。それは私のコンテンツの中断を変更しませんでした。だから私はそれがフッターではないことを知っていた。

私はフッターがコンテンツの一番下にくるようにしました。だから固定フッタは私が必要なものではありませんが、プッシュフッターがそのトリックをすることが分かりました。どうやら、そのページ上の多くのコンテンツではなく、フッターがコンテンツの停止位置に押し上げられることがあります。だから、私の次のステップは、コンターを切り取っていたものを正確に見つけ出すことでした。

レイアウトの途中で途切れるコンテナです。コード内の#primaryはバックグラウンドストップの伸ばしが間違ったセレクターだったので、bodyに変更しました。コンテナの高さと幅を100%にするコードも追加しました。その後、それはうまくいった。以下は、私が問題を解決するために使用した追加のCSSです。私を助けてくれた皆さん、ありがとう。

body { 
width:100%; 
height:100%;} 


body { 
position: absolute; 
background-size: cover; 
background-attachment: fixed;} 
0

私はあなたの質問を完全に理解しているかどうかはわかりませんが、CSSの問題はheight: 100%;だと思います。 100%の高さを加えると画面の高さは100%になります。ページの上部から開始されないため、表示領域の下部より下に伸びます。 CSS top: 0;を追加すると、意味するものが表示されます。画面の下には表示されなくなりますが、ヘッダーと重なって表示されます。これを回避するには、CSSを変更することができます。

position: absolute; 
left: 0; 
height: calc(100% - 54px); /*Minus the height of the header*/ 
top: 54px; /*The height of the header*/ 
background-size: cover; 
background-attachment: fixed; 

私は、より詳細に問題を説明し、私は助けることができる場合、私はわかりますしてくださいされていない場合、このことができます願っています!

+0

ボックスを垂直にセンタリングする場合は、CSS: 'display:flex;あなたは 'main#main {width:100%;}'を追加してください。 – ceindeg

+0

こんにちはありがとうございます。はい。あなたの助けを借りて画面の高さを変えながら、高さは何も固定していないと分かりました。あなたが追加したコードは、私の問題を解決するのに役立たなかった。しかし、それは何が起こっているのかを見るのを助けて、私はもっと説明することができました。私はオリジナルのポストを編集して、何が起こっているかのスクリーンショットを明らかにしました。私のフッタはページの真ん中にあり、コンテンツを切り取っているようです。コンテンツの後ろにも読み込まれます。 –

関連する問題