展開元素的高度在小屏幕上

Question

https://jsfiddle.net/7v0dyfo3/

這是（不完全，沒有造型）我想要一上市做。 這一切都很好，但它不能正確調整大小。 我希望div情節盒能夠擴大智能手機屏幕的高度，所以文字可以在圖像下方垂直顯示。

這是不是很正確的編碼，但你能告訴我什麼是我的錯誤調整大小不好嗎？

<article class="full-width"> 

    <div class="post-box"> 

     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="guide-art-container"> 



         <div class="episode-content"> 

          <div class="saga"> 

           <div class="row"> 
            <div class="col-md-12"> 
             <div class="episode-box"> 
              <div class="episode-img"> 
               <img class="thumbnail-ep"  src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/> 
              </div> 
              <span class="episode-nb"> <p>001</p></span> 
              <div class="episode-single- content"> 
               <div class="episode-single-title"> 
               <h5><b><a href="http://google.fr">Lorem Ipsum Title</a></b></h5> 
               </div> 
               <div class="episode-single- desc"> 
               <p><b>Lorem ipsum dolor sit  amet, consectetur adipiscing elit.</b> 
               <br> Sed interdum luctus  erat, in Sed interdum luctus erat, in</p> 
               <hr2> 
               <span class="cast"><p>  <b>Scénario:</b> Sed interdum · <b>Art:</b> Sed interdum · <br> 
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span> 
               </div> 


              </div> 
             </div> 
              <div class="episode-box"> 
              <div class="episode-img"> 
               <img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/> 
              </div> 
              <span class="episode-nb"><p>001</p></span> 
              <div class="episode-single-content"> 
               <div class="episode-single-title"> 
               <h5><b><a href="http://google.fr">Lorem Ipsum Title</a></b></h5> 
               </div> 
               <div class="episode-single-desc"> 
               <p><b>Lorem ipsum dolor sit  amet, consectetur adipiscing elit.</b> 
               <br> Sed interdum luctus  erat, in Sed interdum luctus erat, in</p> 
               <hr2> 
               <span class="cast"><p> <b>Scénario:</b> Sed interdum · <b>Art:</b> Sed interdum · <br> 
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span> 
               </div> 


              </div> 
             </div> 
            </div> 

           </div> 

          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

     </div> 





    </div><!--.post-box--> 

</article> 

Answer 1

您需要使用media queries

事情是這樣的：（最小化瀏覽器查看效果）

.full-width { 
 
    margin: 0 0 30px; 
 
    padding: 0; 
 
} 
 
.container { 
 
    max-width: 1170px; 
 
    width: 100%; 
 
} 
 
.row { 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
} 
 
@media (min-width: 1200px) 
 
.col-md-12 { 
 
    width: 100%; 
 
} 
 
.guide-art-container { 
 
    padding: 25px; 
 
} 
 
.saga-title { 
 
    margin-top: 15px; 
 
} 
 
.episode-box { 
 
    width: auto; 
 
    background-color: #F9F9F9; 
 
    margin-top: 7px; 
 
    box-shadow: inset 0px 100px 150px -150px rgba(204,204,204,1); 
 
    height: 150px; 
 
    border: 1px solid #E8E8E8; 
 
    position: relative; 
 
} 
 
.episode-img { 
 
    float: left; 
 
} 
 
.episode-box img { 
 
    float: left; 
 
    margin-right: 10px; 
 
    padding: 5px; 
 
} 
 
span.episode-nb { 
 
    position: absolute; 
 
    bottom: 2px; 
 
    left: 5px; 
 
    background-color: #FC8A19; 
 
    max-width: 100px; 
 
    width: 100%; 
 
    opacity: 0.8; 
 
    text-align: center; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    font-size: 15pt; 
 
} 
 
.episode-single-content { 
 
    padding: 10px 10px 10px 0px; 
 
    max-height: 150px; 
 
} 
 
.episode-single-desc { 
 
    max-height: 150px; 
 
    font-size: 9pt; 
 
    padding-right: 4px; 
 
    padding-left: 5px; 
 
    padding-top: 5px; 
 
} 
 
span.cast { 
 
    font-size: 7.4pt !important; 
 
    font-family: 'Roboto', Arial, Tahoma, Sans-serif; 
 
    line-height: 19px; 
 
} 
 
.thumbnail-ep { 
 
    float: left; 
 
    margin-right: 10px; 
 
    position: relative; 
 
    max-width: 260px; 
 
    width: 100%; 
 
    padding: 2px; 
 
} 
 
span.episode-nb { 
 
    position: absolute; 
 
    bottom: 2px; 
 
    left: 5px; 
 
    background-color: #FC8A19; 
 
    max-width: 100px; 
 
    width: 100%; 
 
    opacity: 0.8; 
 
    text-align: center; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    font-size: 15pt; 
 
} 
 
.episode-single-title h5 { 
 
    margin-top: 2px !important; 
 
} 
 

 
@media only screen and (max-width : 480px) { 
 
    .episode-img { 
 
     float:none; 
 
     position:relative; 
 
    } 
 
    
 
    .episode-box img { 
 
     float:none; 
 
    } 
 
    
 
    .thumbnail-ep { 
 
     float:none;  
 
    } 
 
    
 
    .episode-box { 
 
     height:auto; 
 
    } 
 
}

<article class="full-width"> 
 

 
\t \t <div class="post-box"> 
 

 
\t \t \t <div class="container"> 
 
\t \t \t \t <div class="row"> 
 
\t \t \t \t \t <div class="col-md-12"> 
 
\t \t \t \t \t \t <div class="guide-art-container"> \t 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t <div class="episode-content"> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t <div class="saga"> 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t \t \t <div class="col-md-12"> 
 
\t \t \t \t \t \t \t \t \t \t \t <div class="episode-box"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <div class="episode-img"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/> 
 
                <span class="episode-nb"><p>001</p></span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t <div class="episode-single-content"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <div class="episode-single-title"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <h5><b><a href="http://google.fr">Lorem Ipsum Title</a></b></h5> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <div class="episode-single-desc"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <hr2> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <span class="cast"><p><b>Scénario:</b> Sed interdum · <b>Art:</b> Sed interdum · <br> 
 
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <div class="episode-box"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <div class="episode-img"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <img class="thumbnail-ep" src="http://image.noelshack.com/fichiers/2015/35/1440684992-img.jpg"/> 
 
                <span class="episode-nb"><p>001</p></span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t <div class="episode-single-content"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <div class="episode-single-title"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <h5><b><a href="http://google.fr">Lorem Ipsum Title</a></b></h5> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <div class="episode-single-desc"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <br> Sed interdum luctus erat, in Sed interdum luctus erat, in</p> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <hr2> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <span class="cast"><p><b>Scénario:</b> Sed interdum · <b>Art:</b> Sed interdum · <br> 
 
<b>Animation:</b> Sed interdum · <b>Réalisation:</b> Sed interdum</p></span> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t </div> 
 

 
\t \t 
 

 

 

 
\t \t </div><!--.post-box--> 
 

 
\t </article>

JS Fiddle

Answer 2

您需要媒體查詢。

假設我們有.high-height-in-xs-device

@media screen and (max-width:767px) { 
    .high-height-in-xs-device { 
     height: 800px; 
    } 
} 

上述CSS將僅在屏幕寬度比767px窄，這是xs屏幕寬度的自舉標準工作。