高度100％斷鏈

由於某種原因，高度：100％在整個文檔中不起作用。它在這個過程中中斷，並且不再佔用其父母的100％。高度100％斷鏈

我有以下結構：

<html> 
    <body> 
     <div id="app"> 
      <div data-reactroot> 
       <header class="header"> 
        <nav>...</nav> 
       </header> 
       <main id="main"> 
        <div id="slideshow">...</div> 
        <div id="inner-page">...</div> 
       </main> 
      </div> 
     </div> 
    </body> 
</html>

下面CSS：

body, html { 
    height: 100%; 
} 

#app, #app>div { 
    height: 100%; 
} 

.header { 
    width: 100%; 
    height: 70px; 
    background-color: #263238; 
} 

#main { 
    width: 100%; 
    height: 100%; 
} 

#slideshow { 
    position: absolute; 
    width: 100%; 
    z-index: -1; 
    padding: 0 !important; 
} 

#inner-page { 
    width: 100%; 
    position: relative; 
    padding: 24px; 
}

高度才能正確繼承，直到<div data-reactroot>元（含），但斷裂的<main>元素，我似乎無法弄清楚爲什麼。 CSS非常簡單，我似乎無法深入到問題的底部。

注：我省略了幻燈片，併爲簡單起見，內頁的內容，因爲我相信深度的這個水平是不相關的問題（還是我錯了？）

希望任何協助這個難題。

來源

2016-07-03 user3476096

您指的是主體的高度爲100％; – frnt

因爲我們都知道哪個答案解決了一個具體問題，所以如果您能接受解決您的問題的答案，或者讓我們知道缺少的答案，那將是非常好的，所以我們可以找到一個答案，即 – LGSon

最終發現問題是，整個鏈中的一個孩子的身高已經被外部庫（material-ui）覆蓋了100％，所以身高：100％！重要;修復。感謝所有的建議傢伙 – user3476096

我建議使用100vh代替100%或者，如果你要堅持100%，這樣增加一個選擇：

html, #app, #app>div, body { 
    height: 100%; 
}

這應該工作

來源

2016-07-03 13:32:23 Lucian

我已經有了......我編輯了我的問題並添加了它......它似乎沒有什麼區別。我嘗試使用'100vh'和'min-height：100％'來添加。兩者似乎都沒有工作... – user3476096

它已經在工作，爲#app使用背景並檢查輸出 – Lucian

讓這發生在你的代碼，如果這是關於#main然後height:100%;的高度不會工作，因爲內部存在的元素定位爲absolute。

#app{ 
    width:100%; 
    height: 100%; 
    background:#f22; 
} 

.header { 
    width: 100%; 
    height: 70px; 
    background-color: #263238; 
} 

#main { 
    width: 100%; 
    height: 100vh; 
    background:#ccc; 
}

來源

2016-07-03 13:55:44 frnt

高度100％斷鏈

回答

相關問題