Question

由于某种原因，高度：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非常简单，我似乎无法解决问题的根源。

注意：为了简单起见，我省略了幻灯片和内页的内容，因为我认为深度与问题无关（或者我错了？）

非常感谢您对这个难题的任何帮助。

Answer 1

我建议使用100vh代替100%，或者如果您想坚持100%，请添加一个这样的选择器：

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

这应该有效

Answer 2

在您的代码中进行此更改，如果它与1f 8b 08的高度有关，那么#main将无效，因为内部存在的元素定位为height:100%;。

absolute

高度100％跨链断裂

2 个答案: