React项目中div设置height:50%不生效的原因及解决办法？

问题原因 #

1. 无效CSS属性：float 仅支持 left/right/none 三个取值，不存在 float: top、float: bottom的写法，这部分属性完全不生效。
2. 缺少根节点高度设置：React应用默认挂载在#root节点下，你仅给html、body、.App设置了height: 100%，但遗漏了#root的高度配置，导致.App的百分比高度找不到父级基准，属性失效。
3. 高度计算遗漏导航组件：.App容器内先插入了<Navigation/>导航组件，已经占用了一部分高度，剩余可用高度不足100%，此时给两个子div各设50%，总高度会溢出容器。

解决方案（推荐Flex布局实现，无需手动计算高度） #

第一步：修改全局基础样式 #

补全#root高度设置，同时清除浏览器默认边距，避免盒模型误差：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body, #root {
  height: 100%;
}

第二步：修改.App容器样式 #

把.App改为垂直flex布局，自动分配子元素高度：

.App {
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
}

第三步：修改上下两个div的样式 #

删除无效的float属性，用flex: 1让两个div平分导航之外的所有可用高度：

.top{
  flex: 1;
}

.bottom{
  flex: 1;
}

如果你的需求是上下两个div各占整个视口的50%（导航也包含在其中一个div内），只需要调整JSX结构，把<Navigation/>移入.top或者.bottom容器内即可。

其他可选方案 #

如果不想用flex，也可以用视口单位vh实现，直接给两个div设置高度：

.top{
  /* 45px替换为你的导航组件实际高度 */
  height: calc(50vh - 45px);
}
.bottom{
  height: 50vh;
}

内容的提问来源于stack exchange，提问作者BrownEyedSoul