CSS高度百分比不适用于React
[英]CSS height in % doesn't work only with React
问题描述
I have a wierd problem. 
我有一个奇怪的问题。 I have exactly the same DOM and CSS rendered with React and rendered with pure HTML. 我使用React和纯HTML呈现了完全相同的DOM和CSS。 However, in React children of the div.container doesn't get the proper height when it's set in %. 但是，在React中，将div.container的子级设置为％时不会获得适当的高度。 It works well when it's set with vh or with px, but I can't use those. 与vh或px一起设置时，它可以很好地工作，但是我不能使用它们。 Any idea why? 知道为什么吗？ And how to fix this problem? 以及如何解决这个问题？
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>
2 个解决方案
解决方案1
3 2016-03-18 11:04:56
class is className inside react. class是里面的className反应。
<body>
<div className="container">
<nav></nav>
<header></header>
<div className="wrapper">
<div className="main"></div>
</div>
</div>
</body>
解决方案2
1 2016-08-10 02:19:27
Some advice that might help you.. 一些建议可能会帮助您。
Add html, along with body. 添加html以及正文。
html, body {
height: 100%;
}
Make sure the div your bundle is being loaded to has height: 100%;. 确保要打包的div的高度为：100％;。 In the case below "root" would need it. 在以下情况下，“ root”将需要它。
<body>
<div class="root"></div>
<script src="./bundle.js"></script>
</body>
Last case, if you do something like this: 最后一种情况，如果您执行以下操作：
<div>{this.props.children}</div>
Make sure you give this div a className and add it to the list of things that need to be 100% 确保给该div一个className并将其添加到需要100％的事物列表中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.