2017-09-07 5 views
0

ブートストラップには小さな問題があります。いつか、私のページの背景は半白/半灰色ですが、すべて白でなければなりません。ember-bootstrapに関する問題:ページの背景が半灰色にレンダリングされ、通常は完全に白色になります。

enter image description here

はあなたが見ることができるように、私のアプリケーションでは、いくつかの灰色の背景があり、誰かがそれを取り除く方法を知っています。私はCSSを知っていますので、私の問題についての情報が必要な場合は、私に尋ねてください!ありがとうございました!私はすべての要素のコンテンツのデフォルトのページ・ラッパーを使用しています

body { 
    background-color: #eee; 
    padding-bottom: 35px; 
} 

EDIT は、これが私の体のためのコードです。彼はどこにも定義されていません。

解決: @KieranMcClungのおかげで、それが解決されました。あなたがしたい場合は、コメントで見ることができますが、基本的に、私のような何か私のページ・ラッパーに入れ:

<div id="page-wrapper" style="height: auto; min-height: 100vh"> 
+1

質問に(理想的に)添付するか、codepen/jsfiddleへのリンクを追加することで、いくつかのコードを提供できますか?コードなしで問題を理解することは不可能です。私の前提は、内容要素(白)が画面の高さに足りないため、ボディカラーがその下に表示されるということです。 –

+0

ページを白く標準化するためにブラウザのサイズを変更する必要があります。 – maje

+0

@KieranMcClungこれを修正するには、手動でページラッパーの最小高さを1000pxに設定する必要がありますが、ピクセルを使用しないようにしようとしているので、おそらく他の解決策がありますか? – maje

答えて

1

次の例は、.page-wrapperクラスが100%の画面の高さに常にあることを確認します。

HTML

<body> 
    <div class="page-wrapper"> 
     <!-- Page content --> 
    </div> 
</body> 

CSS

body { 
    background-color: #eee; 
} 

.page-wrapper { 
    background-color: #fff; 
    min-height: 100vh; /* Important bit */ 
} 

これは、画面の高さを意味し、スクロール時にトップのブラウザバーが消えるのでvhは、特定の携帯電話のブラウザ上で様々な結果を持つことができることは注目に値します(vh値)が変化する。これらのデバイスでテストするときは、このことを覚えておく必要があります。

関連する問題