2016-11-25 12 views
1

ウェブページが正常に表示されます。ただし、ブラウザウィンドウのサイズを変更すると、コンテナのコンテンツが上下にプッシュされます。したがって、多くのコンテナの空き領域が残ったり、消えたりする(次のコンテナの下にあるように)。コンテナの内容がウィンドウのサイズに比例して変更される

enter image description here

しかし、私はそれが常に同じ割合で容器の内部になりたいです。ここで

私のコードです:JSFiddleはjQueryの1.11.1では動作しませんなぜ私にはわからない

.first { 
 
    padding-left: 5%; 
 
    } 
 

 
    .second { 
 
     padding: 80px 50px 0px 70px; 
 
     background-size: cover; 
 
    } 
 

 
    .fourth { 
 
     margin-top: 7%; 
 
    } 
 

 
    .third { 
 
    padding-top: 80px; 
 
      padding-bottom: 65px; 
 
      height: 678px; 
 
      position: relative; 
 
      width: 100%; 
 
      min-height: auto; 
 
      overflow-y: hidden; 
 
      background: url("http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg"); 
 
      background-size: cover; 
 
    } 
 

 
    .selling-text { 
 
     font-family: Ubuntu; 
 
     font-size: 20px; 
 
     padding-top: 27%; 
 
     text-align: center; 
 
     color: black; 
 
     margin-left: 2%; 
 
    } 
 

 

 
    .second-block { 
 
     background: #F2EADC; 
 
     height: 500px; 
 
     background-image: url("http://www.planwallpaper.com/static/images/824183-green-wallpaper.jpg"); 
 
     background-size: cover; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="third container-fluid"> 
 
    <div class="col-md-6"> 
 
     <div class="device"> 
 
      <div class="screen"> 
 
       <!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! --> 
 
       <img src="http://happybirthdaycakeimages.com/wp-content/uploads/2015/05/Yummy-Chocolate-Birthday-Cake.jpg" class="img-responsive first" alt=""> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-6"> 
 
     <div class="second"> 
 
      <img src="http://gypsea.com.au/wp-content/uploads/2015/07/freeship.png" class="img-responsive" alt=""> 
 
      <div class="fourth"> 
 
       <button type="button" class="button btn-block">MENU</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="second-block container-fluid"> 
 
    <div class="col-md-6"> 
 
     <div class="screen"> 
 
      <p class="selling-text"> 
 
       See the best cake recipes. 
 
       Trusted recipes for chocolate cake, 
 
       white cake, banana cakes, 
 
       and carrot cakes with photos and 
 
       tips from home cooks. 
 
      </p> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-6 second"> 
 
     <div class="videoWrapper shadow"> 
 
      <iframe width="560" height="315" src="https://www.youtube.com/embed/JM_Q7HR55DY" frameborder="0" allowfullscreen></iframe> 
 
     </div> 
 
    </div> 
 

 
</div>

、それは私がそれをローカルに接続する表示と異なる見えます。

答えて

1

[OK]をクリックします。問題は高さが678pxの<div class="third container-fluid">の固定高さであると思います。より具体的には、ウィンドウのサイズを変更するときに列が動くにつれて、コンテナの子要素の高さ(列の高さ)よりpxが小さいため、固定高さが問題になります。

ここでは固定高さをコメントアウトしたJSFiddleです

+0

ああ、それだけです!どうもありがとうございました!あなたは私をたくさん助けました! –

+0

@LeraZemlyanaya私はあなたを助けることができてうれしいです:)それはあなたが一度やって覚えているそれらのものだと思います – tech4242

+0

はい、まさに! :) –

関連する問題