2017-12-31 55 views
2

に上がっています。そして、なぜ私の秒が絶対に良いので、私はなぜ考えていない。ここ リンク:https://vitas.sk/1/私のdivが私の最後のdivは(実際に私はより多くのdivを持つようにしたい最後)(高さを変更してみてください)ページで上がっているサイト

HTML

.indexthird { 
 
      width: 100%; 
 
      height: 40%; 
 
      background-image: url("http://vitas.sk/1/images/indexthird.jpg"); 
 
      background-size: cover; 
 
      background-repeat: no-repeat; 
 
      min-height: 300px; 
 
      
 
     } 
 
     .indexthirdbbg{ 
 
     background-color: rgba(0,0,0,0.7); 
 
      width: 100%; 
 
      height: 100%; 
 
      text-align: center; 
 
      padding-top: 7%; 
 
     } 
 
     
 
     .itquotes{ 
 
      
 
      font-size: 1.5vw; 
 
     } 
 
     .itautor { 
 
      font-size: 1vw; 
 
      margin-top: 1%; 
 
      text-align: center 
 
     }
<div class="indexthird"><div class="indexthirdbbg"> 
 
     <i class="itquotes">"„Kým budu ľudia masakrovať zvieratá, budú zabíjať aj jeden druhého.<br> Ten kto seje vraždu a bolesť, nemôže vypestovať radosť a lásku.“"</i> 
 
     <p class="itautor">Pythagoras</p> 
 
    </div> 
 
    </div> 
 

 

 
    
 

 

+0

http://idownvotedbecau.se/nocode/ – Amy

+0

を試してみてください。 –

+0

あなたのコードは*の質問に*する必要があります。サイトのコードが変更されると、あなたの質問は長期的な価値を失います。 – Amy

答えて

1

は、私はリンクを投稿が、私がコードをポストする瞬間を与える理由は、この

.indexthird { 
 
      width: 100%; 
 
      
 
      background-image: url("http://vitas.sk/1/images/indexthird.jpg"); 
 
      background-size: cover; 
 
      background-repeat: no-repeat; 
 
      
 
     } 
 
     .indexthirdbbg{ 
 
     background-color: rgba(0,0,0,0.7); 
 
      width: 100%; 
 
      height: 40%; 
 
      min-height: 300px; 
 
      text-align: center; 
 
      padding-top: 7%; 
 
     } 
 
     
 
     .itquotes{ 
 
      
 
      font-size: 1.5vw; 
 
     } 
 
     .itautor { 
 
      font-size: 1vw; 
 
      margin-top: 1%; 
 
      text-align: center 
 
     }
<div class="indexthird"><div class="indexthirdbbg"> 
 
     <i class="itquotes">"„Kým budu ľudia masakrovať zvieratá, budú zabíjať aj jeden druhého.<br> Ten kto seje vraždu a bolesť, nemôže vypestovať radosť a lásku.“"</i> 
 
     <p class="itautor">Pythagoras</p> 
 
    </div> 
 
    </div> 
 

 

 
    
 

 

-1

あなたはブートストラップを使用しているので、2番目のDIV(ための最後の1

+0

私は私が私の第二のdivにクラスclearfixを(https://v4-alpha.getbootstrap.com/utilities/clearfix/)を添加したが、それは何もしなかっ3つのdiv(インデックス・ページの主要部分を)持っています。 –

0

前に「clearfix」のdivを追加します。 indexsecond)ブラウザの未亡人のサイズ変更に伴って変化する(明らかに)80%の高さを、持っています。高さをpx(+ overflow:hidden)に変更すると、その動作は消えます。

また、.indexthirdは%で、高さがあり、.indexthirdbbgは、ブラウザのウィンドウのサイズを変更しながら、行動に何かを追加することができ%のpadding-トップを持っています。

あなたはwindow.onresizeイベントを定義し、内部ロジックのいくつかの並べ替えで、プログラム的にdivを調整することができます。

+0

私は理解していません。私の第一部と第二部は素晴らしい作品です。私は3つすべての分の高さを持っています。私はそれは彼らが少し応答になり、私はピクセルを使用する場合、私はより多くのpagebreaksを必要とするので、すべての%での高さを持っていると思います。実際には、私はhtmlとCSSのいくつかの基本的な知識を持ってwindow.onresizeを定義することはできません。私はjannuaryの終わりにjavascriptから始めることを計画しています。どのように私は%で高さを設定するか、または私はそれをpxに変更する必要がある方法はありますか? –

+0

@JurajJakubovは2番目のdivから 'height:80%'を単に削除して、すべてがOKになります –

+0

これでやるよ:) –

関連する問題