響應高度

這是我的代碼：響應高度

#bener{ 
 
     background:url(../img/main.png) no-repeat; 
 
    \t background-size:120%; 
 
    } 
 
    
 
    .bener_content{ 
 
     color:#fff; 
 
    \t text-align:center; 
 
    \t margin-top: 30%; 
 
    } \t 
 
    .bener_overlay{ 
 
    \t background: rgba(75, 78, 78, 0.7); 
 
     height: 120%; //This line 
 
    } \t 
 
    .bener_content h2{ 
 
     color:#ffff; 
 
    } \t 
 
    .bener_content p{ 
 
     color:#ffff; \t 
 
    }

 
 
<section id="bener" class=""> 
 
    <div class="bener_overlay"> 
 
     <div class="container"> 
 
     <div class="bener_content"> 
 
      <p class="textmiddle">TEXT</p> 
 
\t \t <h3>Text</h3> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</section>

我的問題是，每當我嘗試不同的分辨率我的網站，我的主頁畫面不結垢，寬度很好，但高度始終相同。在.benner_overlay中，我使用了百分比高度，但由於某些原因，它不會執行任何操作，而且當我使用像素時，它無法響應。我該如何解決這個問題，以便我在任何地方嘗試我的網站時，家庭影像覆蓋整個屏幕？

來源

2017-07-31 John

_「在.benner_overlay中，我使用百分比高度，但由於某些原因，它什麼都不做」_CSS 101：如果父元素也有明確的高度設置，百分比高度只會產生影響。 – CBroe

寬度的百分比值必須最大爲100％。這不是一個好習慣。 –

由於CBroe已經提到作爲評論，爲了使用基於百分比的高度，父元素也需要基於百分比的高度。爲了實現這一點，你基本上必須從根元素開始，並通過樹。可能的解決方案可能如下所示。

html, body { 
    height: 100%; 
} 

#bener { 
    background: url(../img/main.png) no-repeat; 
    background-size: 120%; 
    height: 100%; 
}

Demo

來源

2017-07-31 10:40:39 Aer0

先給高度的背景圖片：

height:100vh;

然後，它會擴展到任何設備的視口高度。

來源

2017-07-31 10:54:01

回答

相關問題