1
レスポンシブなWebサイトでは、HTML & CSSでコードを記述しています。私はBootstrapperフレームワークを使用します。CSSビューポートの問題：vh vs. 100％
私の問題：バックグラウンドイメージに100％を使用すると、デスクトップの画面でページの最後に到達しません（100％の高さでスケーリングされたイメージがモニタの結果よりも小さいためです）。 iPhone（Safari）では見た目が良くなります。フッターは画像の下にあります。
私はデスクトップ画面上のビューポート値100VHに結果を使用します（画像は背景を塗りつぶします）素敵に見えますが、モバイルデバイス（iPhone）に、テキストがフッターに重ならます。恐ろしいですね。
私は以下のようなソリューションを探しています：デスクトップでの使用100vh、モバイルでの使用100％。それは可能ですか？
HTML-コード：
<section id="myid">
<div class="myclass">
<div class="container">
<div class="row">
<div class="col-md-8 opaline">
<div class="row">
<div class="col-md-10 col-md-offset-1">
\t \t \t \t \t \t \t \t <p>Great Content</p>
\t \t \t \t \t \t \t \t </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-10">
\t \t \t \t \t
<p>Great Footer Content</p>
</div>
</div>
</div>
</footer>CSS：（モバイル・ブラウザ上のOK-結果）
.myclass {
/* The image used */
background: linear-gradient(rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1)), url(/images/image.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
padding-top: 36px;
}CSS：（デスクトップブラウザ上のOK-結果）
.myclass {
/* The image used */
background: linear-gradient(rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1)), url(/images/image.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
padding-top: 36px;
}私もCALC機能を果たした - ノー成功を収めて：
height: calc(100vh - 000px);
は両方で100％を使用し、MIN-高さ、それを作る：100VHを、結果が得られます欲しいです？ –