Html React - 组件全屏（高度为 100%）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38428322/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React - Component Full Screen (with height 100%)
提问by Thibault Clement
I'm stuck with displaying a React component named "home" that take 100% of the height of my screen. Whatever I use CSS or React inline style it doesn't work.
我一直坚持显示一个名为“home”的 React 组件，它占据了我屏幕高度的 100%。无论我使用 CSS 还是 React 内联样式，它都不起作用。
In the example below, html, bodyand #appare set to height: 100% in CSS. For .homeI used inline style (but whatever I used CSS or inline style is the same):
The issue seems to come from <div data-reactroot data-reactid='1'>that is not set with height: 100%.
在下面的示例中，html、body和#app在 CSS 中设置为 height: 100% 。对于.home，我使用了内联样式（但无论我使用的是 CSS 还是内联样式都是一样的）：
问题似乎来自<div data-reactroot data-reactid='1'>未设置高度：100%。
If I hacked it with Chrome developer tool, it's work:
如果我用 Chrome 开发者工具破解它，它的工作：
So what is the proper way to display a full height component in React ?
那么在 React 中显示全高组件的正确方法是什么？
Any help is welcome :)
欢迎任何帮助:)
回答by bora89
html, body, #app, #app>div {
height: 100%
}
This will ensure all the chain to be height: 100%
这将确保所有链 height: 100%
回答by Daniel Kim
You could also do:
你也可以这样做：
body > #root > div {
height: 100vh;
}
回答by michaelfeng
It annoys me for days. And finally I make use of the CSS property selector to solve it.
这让我烦了好几天。最后我使用 CSS 属性选择器来解决它。
[data-reactroot]
{height: 100% !important; }
回答by Suicide Bunny
try <div style = {{height:"100vh"}}> </div>
尝试 <div style = {{height:"100vh"}}> </div>
回答by maeneak
I managed this with a css class in my app.css
我用 app.css 中的 css 类管理了这个
.fill-window {
height: 100%;
position: absolute;
left: 0;
width: 100%;
overflow: hidden;
}
Apply it to your root element in your render() method
将其应用于 render() 方法中的根元素
render() {
return ( <div className="fill-window">{content}</div> );
}
Or inline
或内联
render() {
return (
<div style={{ height: '100%', position: 'absolute', left: '0px', width: '100%', overflow: 'hidden'}}>
{content}
</div>
);
}
回答by Aman Parmar
While this may not be the ideal answer but try this:
虽然这可能不是理想的答案，但试试这个：
style={{top:'0', bottom:'0', left:'0', right:'0', position: 'absolute'}}
It keeps the size attached to borders which is not what you want but gives you somewhat same effect.
它将尺寸附加到边框上，这不是您想要的，但会给您带来相同的效果。
回答by user3785155
body{
height:100%
}
#app div{
height:100%
}
this works for me..
这对我有用..
回答by Dennis LLopis
I had the same issue displaying my side navigation panel height to 100%.
我有同样的问题，将我的侧导航面板高度显示为 100%。
My steps to fix it was to:
我修复它的步骤是：
In the index.css file ------
在 index.css 文件中------
.html {
height: 100%;
}
.body {
height:100%;
}
In the sidePanel.css (this was giving me issues):
在 sidePanel.css （这给我带来了问题）：
.side-panel {
height: 100%;
position: fixed; <--- this is what made the difference and scaled to 100% correctly
}
Other attributes were taken out for clarity, but I think the issue lies with scaling the height to 100% in nested containers like how you are trying to scale height in your nested containers. The parent classes height will need to be applied the 100%. - What i'm curious about is why fixed: position corrects the scale and fails without it; this is something i'll learn eventually with some more practice.
为了清楚起见，其他属性已被删除，但我认为问题在于将嵌套容器中的高度缩放到 100%，就像您尝试在嵌套容器中缩放高度一样。父类高度将需要应用 100%。- 我很好奇的是为什么固定：位置校正比例，没有它就会失败；这是我最终会通过更多练习学到的东西。
I've been working with react for a week now and i'm a novice to web developing, but I wanted to share a fix that I discovered with scaling height to 100%; I hope this helps you or anyone who has a similar issue. Good luck!
我已经和 react 一起工作了一个星期，我是 Web 开发的新手，但我想分享一个我发现的将高度缩放到 100% 的修复程序；我希望这对您或任何有类似问题的人有所帮助。祝你好运！
回答by Shevchenko Viktor
Despite using of React here - elements layout is completely html/css feature.
尽管在这里使用了 React - 元素布局完全是 html/css 特性。
The root cause of the issue is in how heightproperty in css works. When you are using relative values for height (in %) - this means that height will be set in relation to its parent.
问题的根本原因height在于 css中的属性是如何工作的。当您使用高度的相对值（以 % 为单位）时 - 这意味着将相对于其父级设置高度。
So if you have a structure like html > body > div#root > div.app- to make div.app100% height all its ancestorsshould have 100% height. You may play with next example:
所以，如果你有一个像一个结构html > body > div#root > div.app-使div.app100％的高度及其所有祖先应该有100％的高度。你可以玩下一个例子：
html {
height: 100%;
}
body {
height: 100%;
}
div#root {
height: 100%; /* remove this line to see div.app is no more 100% height */
background-color: indigo;
padding: 0 30px;
}
div.app {
height: 100%;
background-color: cornsilk;
}<div id="root">
<div class="app"> I will be 100% height if my parents are </div>
</div>Few arguments:
几个论点：
- Usage of
!important- despite some time this feature is useful in ~95% of cases, it indicates a poor structure of html/css. Also, this is not a solution to the current problem. - Why not
position: absolute. Propertypositonis designed to change how the element will be rendered in relation to (own position - relative, viewport - fixed, nearest parent whos position is not static - absolute). Ans despiteposition: absolute; top: 0; right: 0; bottom: 0; left: 0;will result in the same look - it also pushes you to change parentspositionto something notstatic- so you need to maintain 2 elements. That also causes parent div be collapsed in a line (0-height), and inner - full screen. That makes confusion in element inspector.
- 使用
!important- 尽管有一段时间此功能在约 95% 的情况下很有用，但它表明 html/css 的结构很差。此外，这不是当前问题的解决方案。 - 为什么不呢
position: absolute。属性positon旨在更改元素相对于（自己的位置 - 相对，视口 - 固定，位置不是静态的最近父级 - 绝对）的呈现方式。Ans 尽管position: absolute; top: 0; right: 0; bottom: 0; left: 0;会导致相同的外观 - 它也会促使您将父项更改position为不是static- 因此您需要维护 2 个元素。这也会导致父 div 折叠成一行（0 高度）和内部 - 全屏。这在元素检查器中造成了混乱。
回答by David Douglas
#app {
height: 100%;
min-height: 100vh;
}
Always full height of view min
始终全视高度 min
