div采用所有可用高度
我正在使用下面的HTML
<div className="App">
<div className="AppMenu">
Menu
</div>
<div className="AppContainer">
Test
</div>
</div>还有这个CSS：
.App {
min-height: 100vh !important;
max-height: 100vh !important;
height: 100vh !important;
background-color: red;
}
.AppMenu {
background-color: blue;
position: sticky;
top: 0px;
width: 100%;
font-size: 1.3em;
}
.AppContainer {
background-color: green;
}如何使用CSS (或js)设置/计算高度为100vh-(AppMenu AppContainer )的高度？
回答 2
Stack Overflow用户
发布于 2020-12-19 23:08:45
您已经在100vh中使用了屏幕的全高。没有必要使用像!important这样的核武器，它几乎总是掩盖问题而不是解决问题。此外，min-height: 100vh; + max-height: 100vh;也可以被认为是糟糕的编码。在这种情况下，您需要确定的高度为100vh，这是由height: 100vh;完成的。所以你有3行代码，而实际上你只需要1行。
出现滚动条和屏幕溢出的问题是由默认的正文边距引起的。该元素的高度将是100vh，并使用默认的正文amrgin，这将导致文档高度超过100vh。因此，只需使用：body { margin: 0; }将默认的body amrgin重置为0
然而，在这种情况下，你会有一个潜在的溢出问题。因此，您应该为容器设置一个overflow rule，或者使用min-height。
要让AppContainer填充剩余的高度，有多种方法可以解决它。解决这个问题最简单的方法就是用grid-template-rows: min-content auto;创建一个CSS-Grid。这样，菜单将根据需要占用尽可能多的空间，并且AppContainer将使用重新挖掘的高度。
body {
margin: 0;
}
.App {
height: 100vh;
background-color: red;
display: grid;
grid-template-rows: min-content auto;
}
.AppMenu {
background-color: blue;
position: sticky;
top: 0px;
font-size: 1.3em;
}
.AppContainer {
background-color: green;
}<div class="App">
<div class="AppMenu">
Menu
</div>
<div class="AppContainer">
Test
</div>
</div>
最后但并非最不重要。对于超文本标记语言，你必须使用class而不是className，这将是无效的超文本标记语言，因为这个属性不存在。
Stack Overflow用户
发布于 2020-12-19 23:36:40
这些行没有任何意义。可以将其删除：
max-height: 100vh !important;
height: 100vh !important;要将.AppContainer拉伸到完全自由高度，请使用规则flex: 1
.AppContainer {
...
flex: 1;
}对于.App，设置flex规则。如下所示：
.App {
...
display: flex;
flex-direction: column;
}Flex有非常好的浏览器支持。
你需要这样的结果吗？
.App {
min-height: 100vh !important;
background-color: red;
display: flex;
flex-direction: column;
}
.AppMenu {
background-color: blue;
position: sticky;
top: 0px;
width: 100%;
font-size: 1.3em;
}
.AppContainer {
background-color: green;
flex: 1;
}<div class="App">
<div class="AppMenu">
Menu
</div>
<div class="AppContainer">
Test
</div>
</div>
https://stackoverflow.com/questions/65370755
复制相似问题
腾讯云开发者
