2016-06-24 22 views
0

私はブートストラップの子divのdiv全体を塗りつぶすために背景色を取得しようとしていますが、私は完全に固まっています。右側のセクションを黄色にしたいのですが、div内のテキストのみを強調表示しています。div全体を背景色で塗りつぶす方法

ここにはfiddleがあります。

私は本当に明白な何かが欠落していることを知っていますが、col-lg-6 div全体を埋めるのにどのように黄色くなりますか?

.new-section { 
 
    height: 100%; 
 
    padding-top: 150px; 
 
    text-align: center; 
 
    background: #eee; 
 
} 
 

 
.yellow { 
 
    background-color: yellow; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<section id="new" class="new-section"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-6"> 
 
     <h1>Section left</h1> 
 
     </div> 
 
     <div class="col-lg-6 yellow"> 
 
     <h1>Section right</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

+0

div要素は、あなたはそれがあることを何を見ている、100%の高さを持っているつもりされていませんdiv全体を満たしていない? – epascarello

+1

divの全部が黄色です...その中の唯一のものは見出しです - https://jsfiddle.net/yjcrc91e/4/ –

+0

問題は表示されません...実際に何をしたいですか?起こる? 2番目の 'col-g-6' divはすでに色の黄色で塗りつぶされています。 –

答えて

3

あなたがそう.container-fluid

.containerを変更するだけwidth:1170px

を持って.container.col-lg-*を使用しているので、これが起こっているのは、bootstrap docs

.new-section { 
 
    height: 100%; 
 
    padding-top: 150px; 
 
    text-align: center; 
 
    background: #eee; 
 
} 
 
.yellow { 
 
    background-color: yellow; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<!-- New Exhibit Section --> 
 
<section id="new" class="new-section"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 col-lg-6"> 
 
     <h1>Section left</h1> 
 
     </div> 
 

 
     <div class="col-xs-6 col-lg-6 yellow"> 
 
     <h1>Section right</h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>
にコンテナに関する詳細情報を参照してください。

+0

div内のパディングに背景色が適用されるため、これは不要です。 – Sam

+0

問題は、divの内容だけでなく、セクションの右側全体が黄色になるようにしたいということです。したがって、上記の例では、「セクション右」の上にある灰色の余白も黄色になります。それ、どうやったら出来るの? – hcgriggs

+1

更新された回答を参照してください。 – dippas

0

か、単に:

.yellow { 
    background-color: yellow; 
    padding: 0 0; 
} 
+0

div内のパディングに背景色が適用されるため、これは不要です。また、!importantの使用は可能な限り避けるべきです。 – Sam

+0

ありがとう、私はそれを編集します:D – chino

0

h1はそのラッパーによって引き継がれる上下のマージンを持っており、彼らはあるので、背景色に影響されないということを覚えておいてくださいブロック要素の外側にある。あなたは(代わりに、余白のパディングを使用してますが)、H1タグを削除し、同様の方法で、親コンテナのスタイルを設定できます。

https://jsfiddle.net/j33wz2o6/1/