gpt4 book ai didi

html - 以 % 表示的 CSS 高度不适用于 React

转载 作者:行者123 更新时间:2023-11-28 10:37:41 26 4
gpt4 key购买 nike

我有一个奇怪的问题。我有完全相同的 DOM 和 CSS,用 React 渲染和用纯 HTML 渲染。但是,在 div.container 的 React 子级中,当它设置为 % 时,它不会获得正确的高度。用 vh 或 px 设置时效果很好,但我不能使用它们。知道为什么吗?以及如何解决这个问题?

div.form label:after, div.wrapper:after, div.container:after {
display: block;
content: '.';
clear: both;
height: 0;
visibility: hidden;
line-height: 0;
padding: 0;
margin: 0;
}
body {
width: 100%;
margin: 0;
min-width: 319px;
min-height: 479px;
background-color:black;
}
div.container {
margin: 0 auto;
width: 100%;
height: auto;
max-height: 1368px;
max-width: 1368px;
min-width: 319px;
min-height: 100%;
position: relative;
background-color:red;
}
nav {
width: 82px;
height: 100%;
height: 100vh;
max-height: 1368px;
float: left;
z-index: 1000;
overflow: hidden;
background-color: #55c7f9;
}
header {
height: 15%;
margin: 0 6%;
float: initial;
position: relative;
width: calc(100% - 80px);
background-color:orange;
}
div.wrapper {
min-height: calc(100% - 62px);
height: auto;
width: calc(100% - 80px);
float: right;
background-color:yellow;
}
div.main {
width: 90%;
height: 100%;
box-sizing: border-box;
margin: auto;
padding-bottom: 10px;
height: calc(100% - 158px);
background-color:green;
}
<body>
<div class="container">
<nav></nav>
<header></header>
<div class="wrapper">
<div class="main"></div>
</div>
</div>
</body>

最佳答案

class 是 react 中的 className。

<body>
<div className="container">
<nav></nav>
<header></header>
<div className="wrapper">
<div className="main"></div>
</div>
</div>
</body>

关于html - 以 % 表示的 CSS 高度不适用于 React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36082648/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com