爲什麼這個div拒絕擴展到100％的高度？

我正在開發一個Angular項目。我有這個框架，我試圖設計由'ng-view'插入的部分。當我嘗試設置關於id的背景圖像（我切換到顏色的問題）時，它會自動將該div設置爲0px，即使我將高度設置爲100％。 html/body height設置爲100％，但它仍然不起作用。我已經嘗試了許多類似問題的答案，但它仍然無法正常工作。爲什麼是這樣？順便說一句，我正在使用一個部分，因爲我正在製作一個滾動網站。所以當我說div時，我的意思是section。爲什麼這個div拒絕擴展到100％的高度？

注意：如果我將高度設置爲500像素，則會顯示。百分比不起作用。

主要PAGE-

<body ng-app="jayPortfolio" ng-controller="mainController as main"> 

    <!-- NAVBAR --> 
    <header id="main-header"> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 

      <a class="navbar-brand" href="#">JAY</a> 
     </div> 

     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#contact">About</a></li> 
      <li><a href="#contact">Portfolio</a></li> 
      <li><a href="#contact">Experience</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 
    </header> 

    <!-- LOAD OTHER PAGES HERE --> 
    <main id="main-pages"> 
    <div ng-view></div> 
    </main> 
</body>

Partial-

<section id="about">  
</section>

CSS-

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
} 

#about { 
    height: 100%; 
    width: 100%; 
    /*background-image: url('../../images/jay-ocean.jpg');*/ 
    background-color: green; 
    background-repeat: no-repeat; 
    position: relative; 
}

答案 -

名爲div的NG-視圖，＃NG-視圖，比更新了下面的CSS。正如阿列克謝的答案中所見。

html, body, main, #ng-view { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
}

來源

2015-08-19 jtbitt

如果排除「

」容器，則代碼正常工作：https： //jsfiddle.net/4wovvt6p/。所以也許你應該考慮對包含div應用一些'CSS'，以使它的高度也達到100％。 –

https://jsfiddle.net/4wovvt6p/1/

正如我在我的評論中提到，你應用height:100%身體，和部分，但它並不適用於含有div。默認情況下，div從0px開始並根據內容進行擴展，如果您的內容是100％，那麼它是0px的100％，因此仍然爲0.

來源

2015-08-19 01:11:14

雅這就做到了。啞巴忽略。結束了添加主和＃ng-view（id我給了它），以相同的高度/寬度樣式作爲html和body，並且它工作正常。非常感謝！ – jtbitt

我很高興它的工作，你可以請標記的答案被接受，所以其他人知道這個問題已被回答。 –

沒問題。 1分鐘:) – jtbitt

這是我的理解，你不能設置一個CSS對象的高度％爲基準，我在CSS比較糟糕，所以我可能是錯的，但我記得，作爲結果，當我有同樣的問題幾個月前。

來源

2015-08-19 01:06:34 Nikerym

這是不正確的，你可以將CSS高度設置爲％ –

對不起，我應該重新修改一下，我的評論是隻有它是，否則它將是父對象的100％。（如果它是你的頂級div將是身體的，因爲不能設置，你不能做100％的瀏覽器窗口，我相信這是OP的意圖）如果這仍然是錯誤的，我站在糾正！ – Nikerym

啊啊，100％的身體沒有太大的作用。 –

爲什麼這個div拒絕擴展到100％的高度？

回答

相關問題