最小幅が画面の幅（つまり携帯端末）より大きい場合、スティッキーフッタが機能しない

私はでないウェブサイトを持っていますは反応したいと考えており、最小幅（1024ピクセル）を本体とフッタはデスクトップ上と同じように見えます。このため、モバイルでウェブサイトを垂直方向に表示すると、コンテンツがページ全体を占めることはないため、ページの下部にフッターを貼りたいと思っています。最小幅が画面の幅（つまり携帯端末）より大きい場合、スティッキーフッタが機能しない

問題：モバイルデバイスで
垂直ウェブサイトを閲覧する際にスティッキーフッターのコードが適用されていなかったかのように、フッターが画面の下にプッシュではなく、単にコンテンツの下にされていません。私のMacBookとiPadの両方で動作しますが、私のiPhoneやXiaomi Redmiでは動作しません。私はそれが私が設定した最小幅の幅よりも小さいモバイルデバイスの幅に起因すると推測しています。

コードは（mystrdの近代的なきれいなCSSスティッキーフッターのチュートリアルから）

<!DOCTYPE html> 
<head> 
    <title>the title</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
    <nav>the nav</nav> 
    <article>the article</article> 
    <footer>the footer</footer> 
</body> 
</html>

を次のように基本的で、CSSは私のサイトは、私は、この正確なコードを適用しているhttp://www.collectthis.com.auある

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    min-width: 1024px; 
    width: 100%; 
    margin: 0 0 100px; 
} 
footer { 
    min-width: 1024px; 
    width: 100%; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
}

です。

私はまた、Ryan Faitのスティッキーフッタコードを試してみましたが、それはしませんでした。しかし、それはMacBookと12インチのiPadでは完全に動作していますが、それはlooks like soです。いずれかの動作。任意の助けをいただければ幸いです！

出典

2016-04-15 chris

'' 'head'タグの内部は良いスタートです。 –

完了。申し訳ありませんが、htmlの新機能です。 – chris

あなたはvh（ビューポートの高さ）を使用することができますしたい場合は、0vhはと100vh「あなたのビューポートの高さの0％」は「あなたのビューポートの高さを100％」を意味する

を意味し、私はちょうどtop: Calc(100vh - 100px);にbottom: 0を変更（100pxにされますフッターの高さ）、CalcはCSS3関数なので、古いブラウザでは機能しません。

html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    min-width: 1024px; 
 
    width: 100%; 
 
    margin: 0 0 100px; 
 
} 
 

 
nav{ 
 
    background-color: blue; 
 
    } 
 
footer { 
 
    min-width: 1024px; 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: Calc(100vh - 100px); 
 
    height: 100px; 
 
    background-color: orange; 
 
}

<head> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <nav>Nav...</nav> 
 
    <article>Article...</article> 
 
    <footer>footer...</footer> 
 
</body>

それは私のPC上で動作し、また、私のAndroid携帯電話上で動作するようです。

私はあなたが望んでいたことを望みます。

出典

2016-04-15 13:13:49

ねえ、私はあなたのコードを試して、それと同じ効果があります。それは自分のPC上で動作しますが、私のiPhoneでは動作しません。しかし、私のiPhone上でコードスニペットを実行すると、うまくいくようです。同じコードを私のウェブサイト（http://imgur.com/hMvwyf6）で実行していないときだけです。あなたの助けをありがとう！ – chris

こんにちは、私はあなたの正確なコードを入力し、それは働いた。私の見出しには（これは重要ではないと思った）モバイルフレンドリーなのか、それとも何であれ、モバイルで同じように行動することはありません。 – chris

はあなたのCSSの残りの部分にいくつかのより多くの洞察を使用することができます。

私はこの

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    width: 100%; 
    margin: 0 0 100px; 
} 
footer { 
    min-width: 1024px; 
    width: 100%; 
    position: fixed; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
}

は（絶対変え、あなたの体の上に幅を削除しようとすると、 - あなたのフッターそれはあなたが望む結果を得る。しかし、他に何があるのかわからないと、私はあなたのために多くをすることができません。

出典

2016-04-15 13:07:13

こんにちは、それは文字通り私が持っているCSSのすべてです。私は、 "sticky footer"という2つの異なる定義があることを発見しました。私は、ページを埋めるための十分なコンテンツがないときに、ページの下部にフッターをプッシュするものを後にします。スクロールするときにあなたに続くものではありません。フッターでスクロールしたい場合、そのコードは機能しますが、それは私が探していたものではありません。しかし、助けてくれてありがとう！ – chris

私はこのフィドルを見つけましたhttp://jsfiddle.net/rws21b21/5/あなたが探しているものかもしれないし、あなたにアイデアを与えるかもしれません。 –

最小幅が画面の幅（つまり携帯端末）より大きい場合、スティッキーフッタが機能しない

答えて

関連する問題