画像このページで重複divの応答性の問題

Question

は： http://getbootstrap.com/examples/carousel/

私はdiv要素を重ねた画像にセクションを追加するには、それを編集しました。今は一般的には、ブラウザウィンドウの解像度を変更すると、テキストのレイアウトが変更されるので、段落全体が途切れてしまいます。別のレイアウトでは、カットオフが少なくなります。異なる解像度では、カットオフになることがあります。私は調整する青い部分の高さを増やすことができますが、私が本当に望むのは、テキストに合わせて展開し、余白を残すことです。

は、どのように私はそれが一貫性になるだろうので、そこにテキストの後に必ず40ピクセルのパディングであり、すべてのテキストは、画像の下に青色のセクションで示し？

URLはここにある：私が編集した http://192.34.63.75/test.html

CSSのみだった：

<style> 
    .blue { 
     color: #ffffff; 
     background-color: #009cde; 
     background-image: radial-gradient(circle farthest-side at center bottom, #009cde, #003087 125%); 
     height:500px; 
    } 

    #situational { 
     padding-top:100px; 
     margin:0 auto; 
     text-align: center; 
     height:450px; 
    } 

    .overlap-image { 
     max-width: 100%; 
     height:auto; 
     position:relative; 
     z-index:10; 
    } 
</style> 

Answer 1

.blue { 
    color: #FFF; 
    background-color: #009CDE; 
    background-image: radial-gradient(circle farthest-side at center bottom , #009CDE, #003087 125%); 
    height: 500px; 
} 

変更

.blue { 
    color: #FFF; 
    background-color: #009CDE; 
    background-image: radial-gradient(circle farthest-side at center bottom , #009CDE, #003087 125%); 
    padding-bottom:50px; 
} 

にdiv要素は段落の高さを取るだろう、底には50pxのパディングがあります。レスポンス部門に一定の高さを設定しないでください。 divの内容がdivの高さを制御するようにします。完璧な