我正在尝试在我的React应用程序中使用Flexbox创建一个简单的两列网页，该网页占据整个宽度和高度。
我可以让它单独使用HTML和CSS，但不能在React应用程序中使用。
到目前为止，我有：
:root {
overflow-x: hidden;
height: 100%;
}
body {
min-height: 100%
}
.flexbox {
height: 100%;
display: flex;
}
.left {
flex: 0 0 200px;
height: 100%
}
.right {
flex: 1
}
和：
<div class="flexbox">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
我意识到我需要<div id="root"></div>在我的帐户中添加额外的标签，index.html因此我还在CSS中添加了以下内容：
#root {
height: 100%;
}
而我的render功能：
render() {
return (
<div className="flexbox">
<div className="left">Left</div>
<div className="right">Right</div>
</div>
)
}
但这不起作用。列存在但不是全高。为什么不？
Arn*_*sen 20
如果您使用create-react-app它class=App，则会root向 DOM添加一个带有 id的元素和一个带有 id 的元素。他们也应该得到height: 100%
html, body, #root, .App {
height: 100%;
}
小智 4
主体会向其父级 (HTML) 查找如何缩放动态属性，因此 HTML 元素也需要设置其高度。
然而，正文的内容可能需要动态更改。将 min-height 设置为 100% 将实现此目标。
html {
height: 100%;
}
body {
height: 100%;
}
| 归档时间： |
|
| 查看次数： |
7162 次 |
| 最近记录： |